Solved

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

Posted on 2014-11-16
3
226 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Make page layout not change with page 1 25
Compute age Html 2 27
Validating number not work with decimal 4 29
AJAx/JQuery/JSON Error 3 16
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.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

730 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