Question

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

Answer 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);

    });

为什么animate（）不能很好地处理data（）？

1 个答案: