为什么 animate() 不适用于 data()？答案

【问题标题】：why animate() doesn't work well with data()?为什么 animate() 不适用于 data()？
【发布时间】：2014-04-27 15:49:32
【问题描述】：

<!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>

【问题讨论】：

欢迎来到本站！请尝试缩小您的问题并更好地解释它。从整个页面发布所有代码不太可能帮助我们回答您的问题。你可以阅读how to ask questions here。
你有什么问题？怎么不好用？

标签： jquery jquery-animate jquery-data

【解决方案1】：

我猜你应该使用$(this).data()，而不是$('div').data()，这样每个DIV都会跟踪自己的动画状态。

    $('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);

    });

【讨论】：