Solved

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

Posted on 2014-11-16
3
212 Views
Last Modified: 2014-11-16
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

0
Comment
Question by:elepil
  • 2
3 Comments
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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.
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
Comment Utility
There's an example here of one way, removing the element and putting it back, but it's messy and not perfect and I wouldn't bother with it.
http://css-tricks.com/restart-css-animation/

...and it kinda defeats the point of css animations so I refer you my previous comment
0
 

Author Closing Comment

by:elepil
Comment Utility
Thanks!
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now