jQuery UI - addClass removeClass - CSS values are stuck
Posted
by Jason D
on Stack Overflow
See other posts from Stack Overflow
or by Jason D
Published on 2010-04-15T21:40:43Z
Indexed on
2010/04/15
21:43 UTC
Read the original article
Hit count: 561
Filed under:
jquery-ui
|jquery-animation
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>
© Stack Overflow or respective owner
