2 Replies - 3236 Views - Last Post: 11 December 2012 - 08:07 PM

#1 njgmoorman  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 65
  • Joined: 02-October 12

Animate CSS -WebKit-box-shadow and text-shadow

Posted 16 November 2012 - 02:12 PM

My HTML is as follows
<!DOCTYPE HTML>
<html>
	<head>
		<title>Convert Data</title>
		<h1 class="heading">Data Converter</h1>
		<script src="http://code.jquery.com/jquery-latest.min.js">
		</script>
		<script src="http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors-min.js">
		</script>
		<script>
			$(document).ready(function() {
				$("h1").animate({
					textShadow: "2px 2px 2px #333",
					WebKitBoxShadowX: "10px",
					WebKitBoxShadowY: "10px",
					WebKitBoxShadowBlur: "5px",
					MozBoxShadowX: "10px",
					MozBoxShadowY: "10px",
					MozBoxShadowBlur: "5px",
					color: "#333"
				}, 2500);
			});
		</script>
		<hr />
		<link rel="stylesheet" href="datconvseparate.css" type="text/css" />
		<link rel="stylesheet" href="animate.css" type="text/css" />
		<script src="datconvseparate.js">
		</script>
	</head>
	<body class="textCenter" id="body">
	<!--[if IE]>
		<script type="text/javascript">window.location = "../../UsingIE/usingie.html";</script>
	<![endif]-->
		<form name="inputs">
			<label class="outputStyle" for="start">Convert:</label>
			<input type="text" name="startNum" class="derp noOutline mainInput" id="start" />
			<select name="startType">
				<option value="0">--Click to Select--</option>
				<option value="1">Byte(s)</option>
				<option value="2">Kilobyte(s)</option>
				<option value="3">Megabyte(s)</option>
				<option value="4">Gigabyte(s)</option>
				<option value="5">Terabyte(s)</option>
				<option value="6">Petabyte(s)</option>
				<option value="7">Exabyte(s)</option>
				<option value="8">Zettabyte(s)</option>
				<option value="9">Yottabyte(s)</option>
			</select>
			<br />
			<br />
			<label class="outputStyle">To:</label>
			<select name="outType">
				<option value="00">--Click to Select--</option>
				<option value="01">Byte(s)</option>
				<option value="02">Kilobyte(s)</option>
				<option value="03">Megabyte(s)</option>
				<option value="04">Gigabyte(s)</option>
				<option value="05">Terabyte(s)</option>
				<option value="06">Petabyte(s)</option>
				<option value="07">Exabyte(s)</option>
				<option value="08">Zettabyte(s)</option>
				<option value="09">Yottabyte(s)</option>
			</select>
			<br />
			<br />
			<a href="javascript:convert();setTimeout(flipEnter, 1);" class="mainButton">Convert</a>
			<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
			<a href="javascript:document.inputs.reset();" class="mainButton">Reset</a>
		</form>
		<br />
		<br />
		<br />
		<div id="outDiv">
		</div>
	</body>
</html>

I'm trying to animate an inset box shadow on the header.
Yes. -WebKit-box-shadow has a value in my css:
-WebKit-box-shadow: 0 0 0;

Right now, only the text is changing to #333. No shadows.
Be gentle. I'm a jQuery n00b

Is This A Good Question/Topic? 0
  • +

Replies To: Animate CSS -WebKit-box-shadow and text-shadow

#2 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 795
  • View blog
  • Posts: 1,681
  • Joined: 30-January 09

Re: Animate CSS -WebKit-box-shadow and text-shadow

Posted 11 December 2012 - 07:22 PM

Surprised this hasn't been answered yet, and sorry for the late reply, been busy lately. The animate() function in jQuery isn't comprehensive, and it doesn't cover box shadow animations, at least not in the current version (1.8.3?). You can utilise a plugin though, this one has active development and seems to be the most recommended one out there.

This post has been edited by e_i_pi: 11 December 2012 - 07:23 PM

Was This Post Helpful? 0
  • +
  • -

#3 njgmoorman  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 65
  • Joined: 02-October 12

Re: Animate CSS -WebKit-box-shadow and text-shadow

Posted 11 December 2012 - 08:07 PM

Thanks! Love your signature btw. I set up a page where if someone's using Internet explorer, they're immediately taken to a page of download links to other browsers
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1