why animate() doesn't work well with data()?

StackOverflow https://stackoverflow.com/questions/22539091

문제 

<!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>
도움이 되었습니까?

해결책

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

    });
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top