マウスが下がっているときにオブジェクトを1方向に移動するようにアニメーション化していますが、マウスクリックが上がると、アニメーションが停止します。
setTimeoutを使用していますが、クリックを解放した後もしばらく動き続けます。
var stopmov
function tomove(){
$('.plwid').animate({
left: '+=1'
},1);
stopmov=setTimeout(function(){ tomove(); }, 1);
}
$('.plwid').mouseup(function(){
clearTimeout(stopmov);
}).mousedown(function(){
tomove();
});
私は周りにプレイしましたsetTimeoutし、setInterval私はそれがjQueryのアニメーションの完了コールバックで再帰呼び出しを使用する方が良いと思います。
また、停止は$('.plwid').stop();。を使用すると非常に簡単です。
以下のデモとこちらのJSFiddleをご覧ください。
function tomove() {
$('.plwid').animate({
left: '+=10'
},
100, 'linear', tomove);
}
$(document).mouseup(function () {
$('.plwid').stop();
});
$('.plwid').mousedown(function () {
tomove();
});.plwid {
position:relative;
left:10px;
background:red;
width:100px;
height:100px;
cursor:pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="plwid"></div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加