                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /jQuery基础课程

如何解决多次点击的问题，还有如何在左移时点右移动可以强制右移动

乱舞的旋律

2015-12-19

源自：jQuery基础课程 7-13

关注问题我要回答

303

操作

收起

1 回答

Yinsion_Nie 回答被采纳 +3 积分
2015-12-23

可以使用老师在7-10节提到的stop()方法，代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery动画特效</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <style type="text/css">
            #div1 {
                position:absolute;
                height:100px;
                width:100px;
                background-color:#ff0000;
                vertical-align:middle;
            }
            #div2 {
                float:right;
            }
        </style>
    </head>
    
    <body>
        <input type="button" value="左移" id="leftMov">
        <input type="button" value="右移" id="rightMov">
        <div id="div2"></div>
        <div id="div1"></div>
        <script type="text/javascript">
            $(function(){
                $("#leftMov").bind("click",function(){
                    $("#div1").stop()
                              .animate({left:"-=100px"},1200            ,function(){
                        $("#div2").html("我在左移");
                    });
                });
                $("#rightMov").bind("click",function(){
                    $("#div1").stop()
                              .animate({left: "+=100px"},1200,function(){
                        $("#div2").html("我在右移");
                    });
                });
            })
        </script>
    </body>
</html>

当你多次点击的时候，他只会响应最后一次的点击事件，而且当你点击右移，然后快速点击左移的时候，div元素会立即向左移。