Solved

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

Posted on 2014-11-16
3
219 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
ID: 40445967
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
ID: 40445969
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
ID: 40445981
Thanks!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

867 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

22 Experts available now in Live!

Get 1:1 Help Now