JQuery解决事件动画重复问题

开发项目时，经常要写动画效果，有时候会遇到动画重复问题，例如：当鼠标移动到某个元素上时，执行某个动画，当我鼠标多次移动到该元素时，该动画就要连续执行，那么怎么去解决呢？

话不多说，直接添代码，简单明了!

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>解决动画重复方法</title>
    <script type="text/javascript" src="dist/js/jquery-1.7.1.js"></script>
    <script>
        $(function () {
            $('div:first').click(function () {
                if (!$('div:last').is(":animated")) {//关键代码，元素不处于动画中执行。
                    $('div:last').fadeToggle(1000, function () {
                        $(this).css("background", "green");
                    })
                }
            });
        });
    </script>
    <style>
        div{
            width: 300px;
            text-align: center;
            margin: auto;
            font-size: 20px;
        }
        #div1 {
            height: 100px;
            background-color: yellow;
            line-height: 100px;
        }

        #div2 {
            height: 300px;
            background-color: red;
            line-height: 300px;
        }
    </style>
</head>
<body>

<div id="div1">单击我</div>
<div id="div2">动画不重复执行！简单，实用！</div>

</body>
</html>

 

posted @ 2017-08-11 10:09  *小嘻嘻*  阅读(744)  评论(0)  编辑  收藏  举报