<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style>
.a{ width:100px; height:100px; float:left; background:teal; margin:10px; border:1px solid black;}
body{width:900px; margin:0 auto;}
.c{ width:300px; height:300px; float:left; background:pink; margin:10px; border:1px solid black;}
</style>
<html>
<body>
<div class="a" > </div>
<div class="a" > </div>
<div class="a" > </div>
<div class="a" > </div>
</body>
</html>
<script>
$(document).ready(function () {
$("div").data("animate","100");
$('div').click(function () {
var data = $('div').data('animate');
if ( data == 10 ) {
$(this).animate({ height: 100 }, 200);
$("div").data("animate","100");
}
else if ( data == 100 ) {
$(this).animate({ height: 10 }, 200);
$("div").data("animate","10");
}
console.log(data);
});
});
</script>
Asked
Active
Viewed 56 times
-5
-
1Welcome to the site! Please try to narrow your question down and explain it better. Posting all of the code from an entire page is not likely to help us answer your questions. You can read about [how to ask questions here](http://stackoverflow.com/help/how-to-ask). – elixenide Mar 20 '14 at 16:26
-
3What's your question? How doesn't it work well? – Barmar Mar 20 '14 at 16:26
1 Answers
1
My guess is that you should be using $(this).data(), not $('div').data(), so that each DIV will keep track of its own animation state.
$('div').click(function () {
var data = $(this).data('animate');
if ( data == 10 ) {
$(this).animate({ height: 100 }, 200);
$(this).data("animate","100");
}
else if ( data == 100 ) {
$(this).animate({ height: 10 }, 200);
$(this).data("animate","10");
}
console.log(data);
});
Barmar
- 741,623
- 53
- 500
- 612