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>