asked on

A very simple (I think) CSS Animation/Transition issue with JQuery

In my code snippet, I am able to START the animation, and I am able to STOP the animation. My problem is with the RESTART where the expected behavior is to reset the animation back to the beginning and resume. But when I press the "Restart Me" button, the animation just continues unimpeded, as if I did nothing.

How can I make the animation abruptly abort and start from the beginning of the animation sequence?

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Changing color</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(e) {
    $("#button1").click(function() {
		$(".mydiv").attr("id", "outerWrapper"); // add the id="outerWrapper", the trigger
    });
	$("#button2").click(function() {
		$(".mydiv").removeAttr("id", "outerWrapper");
	});
	$("#button3").click(function() {
		$(".mydiv").removeAttr("id", "outerWrapper").attr("id", "outerWrapper");
	});
});
</script>
<style>
.mydiv {
}
#outerWrapper {
	width: 100px;
	height: 100px;
	margin: 30px auto;
	background: red;
	position: absolute;
}
@-webkit-keyframes spotLightBG {
	0% { left: 500px; }
	100% {left: 100px; }
}
@-moz-keyframes spotLightBG {
	0% { left: 500px; }
	100% {left: 100px; }
}
@-o-keyframes spotLightBG {
	0% { left: 500px; }
	100% {left: 100px; }
}
@keyframes spotLightBG {
	0% { left: 500px; }
	100% {left: 100px; }
}
div#outerWrapper { // wherever 'animation' is defined, the selector will trigger the animation
	-webkit-animation: spotlightBG 10s infinite alternate;
	-moz-animation: spotlightBG 10s infinite alternate;
	-o-animation: spotlightBG 10s infinite alternate;
	animation: spotlightBG 10s infinite alternate;
}
</style>
</head>

<body>
<!--Notice that the id="outerWrapper" is not defined in the <div>; JQuery will add that. -->
<div class="mydiv">
testing
</div>
<input id="button1" type="button" value="Start Me"/>
<input id="button2" type="button" value="Stop Me"/>
<input id="button3" type="button" value="Restart Me"/>
</body>
</html>

Open in new window

Gary

It's not simple because it's not possible with just css.
You would be better sticking with pure jquery to do the animation and forget css animations, they are not advanced enough for things like this.

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

elepil

ASKER

Thanks!