这个鼠标放到一个位置就一直在动

来源:1-4 jQuery中显示与隐藏切换toggle方法

JQuery_DOM

2016-12-17 18:38

<!DOCTYPE html>

<html>


<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <style>

    div {

        width: 500px;

        height: 50px;

        padding: 5px;

        margin: 5px;

        float: left;

        border: 1px solid #ccc;

        

    }

    

    .left {

        background: #bbffaa;

    }

    button{

        width:200px;

        height:100px;

    }

    #q1{

        top:200px;

    }

    #q2{

        top:160px;

    }

    .right {

        background: yellow;

        display: none;

    }

    </style>

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

</head>


<body>

    <h2>通过toggle切换显示与隐藏</h2>

    <div class="left">显示到隐藏</div>

    <div class="right">隐藏到显示</div>

    <button id="q1">直接show-hide动画</button>

    <button id="q2">直接hide-show动画</button>

    <script type="text/javascript">

    $("button:first").mousemove(function() {

        $(".left").toggle({

                duration:3000,

                complete:function(){

                    $(this).css('width','800px'

                    )

                }

            })

    });

    </script>


    <script type="text/javascript">

    $("button:last").mousemove(function() {

        $(".right").toggle(3000)

    });

    </script>


</body>


</html>


写回答 关注

2回答

  • ergfsersdf
    2016-12-17 19:42:20

    两种方法解决此问题  第一种  把你需要操作的button进行固定定位放在你需要的地方  第二种  mousemove换成mouseover就会只执行一次 

  • ergfsersdf
    2016-12-17 19:38:37

    事件在一次一次的累加  所以如果你鼠标触发了button:first的事件但是没有及时移开的话  div.left每移动一像素button:first就会触发一次  你的mousemove事件在排队执行

jQuery基础(四)—动画篇

jQuery基础教程动画篇,讲解jQuery基础开启动画修炼

85049 学习 · 262 问题

查看课程

相似问题