我希望用户在动画尚未完成时无法执行任何操作。例如：不能再次拖动它。
这是我的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/
怎么解决？
您可以在制作动画时停止以下方式的拖动：
$( 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');
}
});
});
之后，您可以$('.drag').draggable( 'enable' );在动画完成后开始拖动。
希望能帮助到你。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句