Hi,
I'm trying to do a simple animation.
- You show the div. It animates correctly.
- You hide the div. Correct.
- You show the div again. It shows but there is no animation. It is stuck at the value of when you first interrupted it.
So somehow the interpolation CSS that is happening during [add|remove]Class is getting stuck there. The second time around, the [add|remove]Class is actually running, but the css it's setting from the class is getting ignored (I think being overshadowed). How can I fix this WITHOUT resorting to .animate and hard-coded style values? The whole point was to put the animation end point in a css class.
Thanks!
<!doctype html>
<style type="text/css">
div {
width: 400px;
height: 200px;
}
.green {
background-color: green;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#show').bind({
click: function() {
showAndRun()
}
})
$('#hide').bind({
click: function() {
$('div').stop(true, false).fadeOut('slow')
}
})
function showAndRun() {
function pulse() {
$('div').removeClass('green', 2000, function() {
$(this).addClass('green', 2000, pulse)
})
}
$('div').stop(true, false).hide().addClass('green').fadeIn('slow', pulse)
}
})
</script>
<input id="show" type="button" value="show" /><input id="hide" type="button" value="hide" />
<div style="display: none;"></div>
You can also look at what it does here at jsbin