jQuery mouseenter、mouseleaveをクリックしても動作しません

Question

ID #workの要素の上にマウスを置くと背景が別の色にアニメーション化されます。したがって、このコード：

$("#work").on('mouseenter', function() { 
    $(".wrapper").animate({"background-color": '#EF6C00'}); 
    }) 

マウスが要素と葉の上にマウスを乗せていないとき、私はそれを元の色に戻したいと思う。したがって、このコード：

$("#work").on('mouseleave', function() { 
    $(".wrapper").animate({"background-color": '#395eb0'}); 
    }) 

今私の問題に。 jQueryに要素をクリックすると、アニメーション化されている色を維持する必要があることを伝えようとしています。単純には全く動作しません。あなたは色のアニメーションを持っているいくつかのプラグインを必要とするすべての

$("#work").on('mouseenter', function() { 
    $(".wrapper").animate({"background-color": '#EF6C00'}); 
    }) 

    $("#work").on('mouseleave', function() { 
    $(".wrapper").animate({"background-color": '#395eb0'}); 
    }) 

    $("#work").on('click', function() { 
    $(".wrapper").css("background-color", '#EF6C00'); 
    }); 

Answer 1

まず： ここでは完全なコードです。

1. あなたは要素を置く：jQueryのUIや今this answer

   あなたのコードで何が起こるかを試してみてください。

2. アニメーションが開始されます。
3. 要素をクリックします。
4. クリックイベントは要素の色を変更します。
5. アニメーション次のステップでは、現在のステップカラーでエレメントを再描画します。
6. アニメーションは引き続き実行されます。

最初にアニメーションを停止する必要があります。

$(document).ready(function() { 
 
    $("#work").on('mouseenter', function() { 
 
    $(".wrapper").stop().animate({ 
 
     "background-color": '#ef6C00' 
 
    }, 2000); 
 
    }) 
 

 
    $("#work").on('mouseleave', function() { 
 
    $(".wrapper").stop().animate({ 
 
     "background-color": '#395eb0' 
 
    }, 2000); 
 
    }) 
 

 
    $("#work").on('click', function() { 
 
    $(".wrapper").stop().css("background-color", '#ef6C00'); 
 
    }); 
 
});

.wrapper { 
 
    width: 150px; 
 
    height: 150px; 
 
    border: 1px solid #ddd; 
 
    background-color: #ef6C00; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 
<div class="wrapper" id="work"></div>