0

mouseenterを使用していくつかのアイコンをフェードインおよびフェードアウトしようとしてmouseleaveいますが、コードがあまりうまく機能していないことに気付きました。コードにいくつかのコンソールログを追加しましたが、mouseenterでmouseleaveログも呼び出されていることに気付きました。誰かが私が間違っていることを説明できますか？

問題のJSFiddle：http://jsfiddle.net/BndxN/1メニュー にすばやくカーソルを合わせると、ボタンの下にアイコンが表示されますか？

JS

/* On sharePage hover hide label and display social icons */
$sharePage.mouseenter(function(){
    $sharePageLabel.fadeOut(function(){
        $socialIconItems.each(function(i){
            $(this).delay(i*45).stop(true,true).fadeIn();
            //console.log($(this));
        });
    });
});
$sharePage.mouseleave(function() {
    $($socialIconItems.get().reverse()).each(function(i){
        $(this).delay(i*305).fadeOut();
        if(i==3){$sharePageLabel.fadeIn()}
    });
});

HTML

<div id="sharePage">
      <h3>Pass The Party On</h3>
      <ul id="socialIcons" class="cf">
        <li><a href="" class="fb ir" data-network="facebook" data-shareurl="">Facebook</a></li>
        <li><a href="" class="twitter ir" data-network="twitter" data-shareurl="">Twitter</a></li>
        <li><a href="" class="googlePlus ir" data-network="google" data-shareurl="">Google+</a></li>
        <li><a href="" class="email ir" data-network="email" data-shareurl="">Email</a></li>
      </ul>
    </div>
4

1 に答える 1

0

mouseenterイベントからのフェードインが終了していないため、アイコンのフェードアウトはトリガーされていません。フェードアウトアニメーションに（timeinの期間中）タイムアウトを追加すると、修正されるようです。

jsfiddle.net/BndxN/26/を参照してください

編集-タイムアウト期間を少し調整することをお勧めします。

于 2012-11-30T16:06:20.110 に答える