.stop（）が他のアニメーションを停止しないようにします。

この小さなドロップダウン矢印があります。<div>クリックしたときに上に移動したい場合は動作します。しかし、不透明度を変更し、jQuery関数.stop()を使用する別のアニメーションがあります。問題は、スライドアニメーション中にその上にカーソルを置くたびに、その要素がトラック内で停止し、アニメーションが終了しないということです。.stop（）が他のアニメーションを停止しないようにします。

どうすれば解決できますか？

PS：誰かが2つの機能を切り替える方法に関する提案があれば、私はそれらを聞いてみたいと思います。ホバーの方がずっと便利です。そのための属性を追加することは、色あせています。

EDIT：使用可能な例：http://plnkr.co/edit/swuKbS3uM8G6stFnUT8U?p=preview

$(document).ready(function() { 
    console.log("ready for action!"); 


    // Dropdown icon hover 

    $("#dropdownIcon").hover(function() { 
     $(this).stop(true).fadeTo(500, 1); 
     console.log("hovering"); 
    }, function() { 
     $(this).stop(true).fadeTo(500, 0.3); 
     console.log("no longer hovering"); 
    }); 


    // Clicking on dropdown icon 

    $("#dropdownIcon").on("click", function() { 
     $(this).find("i").toggleClass("fa-chevron-down fa-chevron-up"); 
     console.log("i clicked on the thing!"); 
     if ($(this).attr("data-click-state") == 1) { 
      $(this).attr("data-click-state", 0); 
      $(this).animate({bottom:"0"},1000); 
      console.log("clicked once"); 
     } else { 
      $(this).attr("data-click-state", 1); 
      $(this).animate({bottom:"50%"},1000); 
      console.log("clicked again"); 
     } 
    }); 

});

HTML

<head> 
    <meta charset="UTF-8"> 
    <link type="text/css" rel="stylesheet" href="CSS/normalize.css" /> 
    <link type="text/css" rel="stylesheet" href="CSS/main.css" /> 
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> 
    <title>Rmonik</title> 
</head> 

<body> 
    <div id="wrapper"> 
     <header> 
      <h1> 
       RMONIK 
      </h1> 
      <div id="dropdownIcon" data-click-state="0"> 
       <i class="fa fa-chevron-down" aria-hidden="true"></i> 
      </div> 

     </header> 

     <nav></nav> 
    </div> 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
    <script src="Javascript/main.js"></script> 
</body> 

</html>

出典

2016-09-26 Rmo

あなたは 'html'、'質問でcss'を含めることができる要素にmouseover、mouseleaveイベントを再接続する.off()、.animate()のcomplete機能を使用：// plnkr .coを実証する？ – guest271314

なぜそれが必要なのかよく分かりませんが、文字通り、id＃＃dropdownIconが移動しているちょうど 'div'です。 – Rmo

_ "なぜそれが必要かわからない" _問題を再現する。 http://stackoverflow.com/help/mcve – guest271314

あなたが名前の関数としてmouseover、mouseleaveイベントを定義することができます。 plnkrにhttpを作成?,

$(document).ready(function() { 
    console.log("ready for action!"); 

    // Dropdown icon hover 
    function handleMouseOver() { 
    $(this).fadeTo(500, 1); 
    } 

    function handleMouseLeave() { 
    $(this).fadeTo(500, 0.3) 
    } 

    function handleAnimationComplete() { 
    $(this).on("mouseover", handleMouseOver) 
     .on("mouseleave", handleMouseLeave) 
    } 

    $("#dropdownIcon").on("mouseover", handleMouseOver) 
    .on("mouseleave", handleMouseLeave); 


    // Clicking on dropdown icon 

    $("#dropdownIcon").on("click", function() { 
    $(this).find("i").toggleClass("fa-chevron-down fa-chevron-up"); 
    console.log("i clicked on the thing!"); 
    if ($(this).attr("data-click-state") == 1) { 
     $(this).attr("data-click-state", 0); 
     $(this).off("mouseover mouseleave") 
     .animate({ 
      bottom: "0" 
     }, 1000, handleAnimationComplete); 
     console.log("clicked once"); 
    } else { 
     $(this).attr("data-click-state", 1); 
     $(this).off("mouseover mouseleave") 
     .animate({ 
      bottom: "-200px" 
     }, 1000, handleAnimationComplete); 
     console.log("clicked again"); 
    } 
    }); 

});

がplnkr http://plnkr.co/edit/qpZM7qRJIjcMebvSs7mB?p=preview

出典

2016-09-26 19:41:38 guest271314

trueの場合、現在実行中のアニメーションのみが停止しますが、スライディングアニメーションか不透明アニメーションかは区別されません。ここでの問題は、2つの異なるイベントから同時に2つの異なるアニメーションを同時に実行しようとしていることですが、jqueryは同時にそれらを実行することはありません。彼らは順番に実行されるので、全体のアイデアはとにかく動作しません。 CSSの移行はこれを可能にします。 –

@KevinB OPが達成しようとしていることは完全にはっきりしていませんか？ '.stop（false）'は '.hover（）'に、 '.stop（true）'は '.hover（）'の第2引数で滑り効果を止めません。 plnkrのバージョン2を参照してください – guest271314

私はそのplnkrをクリックするとアニメーションがほとんど見えず、何かに止められているようです。 –

.stop（）が他のアニメーションを停止しないようにします。

答えて

関連する問題