<i>（jQueryアニメーションを使用）の上にカーソルを置くと狂ったボタン

このボタンがあるので、その上にカーソルを置いたときに幅を変更したいときは、私はそれがマウスアウトされていないときでさえ、崩壊し始めます。ここでは、コードです：あなたは、次のいずれかの前に、前の不完全なアニメーションを停止する必要が<i>（jQueryアニメーションを使用）の上にカーソルを置くと狂ったボタン

$("body").ready(function(){ 
 
     var w = $(".smthnbox").css("width"); 
 
    $(".smthnbox").mouseover(function(){ 
 
    $(".smthnbox").animate({ 
 
     width:"200px" 
 
    },400); 
 
    }); 
 

 
    $(".smthnbox").mouseout(function(){ 
 
    $(".smthnbox").animate({ 
 
     width: w 
 
    },400); 
 
    }); 
 
});

*{ 
 
    margin:0; 
 
    padding:0; 
 
    box-sizing: border-box; 
 
} 
 

 
.smthnbox{ 
 
    width:30px; 
 
    height:30px; 
 
    background: blue; 
 
    margin:20px auto; 
 
    display:block; 
 
}

<!doctype html> 
 
    <head> 
 
    <meta charset="utf-8"/> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://use.fontawesome.com/34f0dfa89d.js"></script> 
 
    <link href="smthn.css" type="text/css" rel="stylesheet"/> 
 
    <title>Welcome | Check it out !</title> 
 
    </head> 
 

 
    <body> 
 
     <button class="smthnbox"> 
 
     <i class="fa fa-envelope-o" aria-hidden="true"></i> 
 
     </button> 
 
     <script src="smthn.js"></script> 
 
    </body>

出典

2017-10-03 Ramy Alayane

番目とあなたがストップを（置くとき、それはおかげで働いたが、私は理解してddnt – epascarello

。

$(".smthnbox").stop().animate({...});

出典

2017-10-03 23:56:29

をmouseleave）それがアニメーションとdoesntのを終了しました他のアニメーションを再生させますか？もしあなたがそれを巧みにすることができれば、どうかしてください。 –

アニメーションには時間があるので、jQueryアニメーションを積み重ねると、次のアニメーションが完了するまでに完了する必要があります。 stop（）は現在のアニメーションの実行を終了させ（終了したかどうかは関係ありません）、要素をその状態のままにして、次のアニメーションが実行を開始します。あなたの例では、マウスイベントが ".smthnbox"にバインドされているため、要素をマウスオーバーすると、 ".smthnbox"のmouseoutイベントが発生し、アニメーションが積み上げられます。 にマウスを移動すると、 ".smthnbox"のマウスオーバーも発生します。 –

+0

ああ大丈夫、ありがとう！もう1つはもっとスムーズな方法ですか？私が誤って "i"要素の上にマウスを置いたときに停止するので、 "i"を途中で止めることができますか？ –

0

問題は、.mouseoutも.smthnboxに異なる要素である<i>、上でトリガされることです。 .mouseoutロジックが.smthnboxの要素にも適用されないようにするには、eventを.mouseoutに渡してから、どの要素にイベントがあるかを確認する必要があります。ターゲット要素でない場合は、その動作を防ぎます。これは、次のように達成することができます。このことができます

$("body").ready(function() { var w = $(".smthnbox").css("width"); $(".smthnbox").mouseover(function() { $(".smthnbox").animate({ width: "200px" }, 400); }); $(".smthnbox").mouseout(function(event) { var e = event.toElement || event.relatedTarget; if (e.parentNode == this || e == this) { return; } $(".smthnbox").animate({ width: w }, 400); }); });

* { margin: 0; padding: 0; box-sizing: border-box; } .smthnbox { width: 30px; height: 30px; background: blue; margin: 20px auto; display: block; }

<!doctype html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://use.fontawesome.com/34f0dfa89d.js"></script> <link href="smthn.css" type="text/css" rel="stylesheet" /> <title>Welcome | Check it out !</title> </head> <body> <button class="smthnbox"> <i class="fa fa-envelope-o" aria-hidden="true"></i> </button> <script src="smthn.js"></script> </body>

希望：

これが唯一のユーザーのマウスは本当に要素から離れたときにトリガ.mouseoutになり！ :)

出典

2017-10-04 00:00:43

0

使用MouseEnterイベントMouseEnterイベントとmouseleaveイベントリスナー

$(function(){ var box = $(".smthnbox") var w = box.css("width"); box.on("mouseenter", function(){ $(this).stop().animate({ width:"200px" },400); }).on("mouseleave", function(){ $(this).stop().animate({ width: w },400); }); });

*{ margin:0; padding:0; box-sizing: border-box; } .smthnbox{ width:30px; height:30px; background: blue; margin:20px auto; display:block; }

<!doctype html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://use.fontawesome.com/34f0dfa89d.js"></script> <link href="smthn.css" type="text/css" rel="stylesheet"/> <title>Welcome | Check it out !</title> </head> <body> <button class="smthnbox"> <i class="fa fa-envelope-o" aria-hidden="true"></i> </button> <script src="smthn.js"></script> </body>

出典

2017-10-04 00:21:55 epascarello

<i>（jQueryアニメーションを使用）の上にカーソルを置くと狂ったボタン

答えて

関連する問題