1つのdivがページの外に隠されており、1つの部分が次のように表示されます。
div{
left: -100px;
width: 150px;
height: 50px;
}
jqueryを使用してdiv全体を表示しました：
$("div").hover(function(){
$("div").animate({left: '0px'});
},function(){
$("div").animate({left: '-100px'});
});
ときに私hoverのdivを超えるとすぐにunhover、それを介して複数回、私がこれを行うアニメーションを何回同じ量を果たしているようです。divにカーソルを合わせるのをやめた場合、アニメーションの途中で停止させるにはどうすればよいですか。また、一定時間カーソルを合わせた後でのみアニメーションを開始させるにはどうすればよいですか。
.stop()前のアニメーションを停止するために使用できます。
$("div").hover(function() {
$("div").stop().animate({
left: '0px'
}, "slow");
}, function() {
$("div").stop().animate({
left: '-100px'
});
}, "slow");div {
left: -100px;
width: 150px;
height: 50px;
background-color: blue;
position: absolute;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>アニメーションが開始する前に少しホバリングするまで待機させたい場合は、を使用setTimeoutでき、ホバー解除機能でタイムアウトをキャンセルできます。
var hoverTimer;
$("div").hover(function() {
hoverTimer = setTimeout(function() {
$("div").stop().animate({
left: '0px'
}, "slow");
}, 1000);
}, function() {
clearTimeout(hoverTimer);
$("div").stop().animate({
left: '-100px'
});
}, "slow");div {
left: -100px;
width: 150px;
height: 50px;
background-color: blue;
position: absolute;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加