Question

我希望用户在动画尚未完成时无法执行任何操作。例如：无法再拖动它。

这是我的javascript源代码：

$( document ).ready(function() {    
        var top_ = $(".drag").position().top ;
        $(".drag").draggable({
        containment : "#box" ,
        stop: function(){
            $(this).stop(true,false).animate({
                top : top_ , 
                width : '100%'
            },1500,'easeOutCirc');
        },
        drag: function(event, ui){
            $(this).stop()
                        .css( "width", (100 - (ui.position.top / 10 ) + '%' ))
                        .css('float' , 'right');
        }
    });
});

HTML

<body>
    <div id = "box" style= "width : 100% ; height :500px">
        <div class = "drag" style= "border: 2px solid ; width : 100% ; height : 30px">
        </div>
    </div>
</body>

和JsFiddle：

http://jsfiddle.net/apss/CzkBu/102/

如何解决？

Answer 1

您可以在制作动画时停止以下方式拖动：

    $( document ).ready(function() {    
        var top_ = $(".drag").position().top ;

        $(".drag").draggable({
        containment : "#box" ,
        stop: function(){
            $(this).stop(true,false).animate({
                top : top_ , 
                width : '100%'
            },1500, function() {$('.drag').draggable('enable');});
            $('.drag').draggable( 'disable' );

        },
        drag: function(event, ui){
            $(this).stop()
                        .css( "width", (100 - (ui.position.top / 10 ) + '%' ))
                        .css('float' , 'right');
        }
    });    
 });

检查Fiddle here.。

之后，您可以在动画完成后开始拖动$('.drag').draggable( 'enable' );。

希望它有所帮助。

如何在jquery

1 个答案: