編集 - 解決済み。一番下に解決策。
私は午後中ずっとこの問題でレンガの壁に頭をぶつけていました。jQueryの天才ではないので、これに対する答えがすでにある場合はapols - 何を検索すればよいかわからず、検索に時間を費やしました!
1 ページで 2 つのアニメーションを実行しようとしています。1 つ目は、4 方向の引き戸効果を与える mouseenter、mouseleave 関数です。
$('.qitem').each(function () {
//grab the anchor and image path
url = $(this).find('a').attr('href');
img = $(this).find('img').attr('src');
//remove the image
$('img', this).remove();
//append four corners/divs into it
$(this).append('<div class="topLeft"></div><div class="topRight"></div><div class="bottomLeft"></div><div class="bottomRight"></div>');
//set the background image to all the corners
$(this).children('div').css('background-image','url('+ img + ')');
$(this).find('div.topLeft').css({top:0, left:0, width:pos , height:posHeight});
$(this).find('div.topRight').css({top:0, left:pos, width:pos , height:posHeight});
$(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos , height:posHeight});
$(this).find('div.bottomRight').css({bottom:0, left:pos, width:pos , height:posHeight});
}).mouseenter(function () {
//animate the position
$(this).find('div.topLeft').stop(false,true).animate({top:negHeight, left:neg}, {duration:speed_out, easing:style_out});
$(this).find('div.topRight').stop(false,true).animate({top:negHeight, left:outHeight}, {duration:speed_out, easing:style_out});
$(this).find('div.bottomLeft').stop(false,true).animate({bottom:negHeight, left:neg}, {duration:speed_out, easing:style_out});
$(this).find('div.bottomRight').stop(false,true).animate({bottom:negHeight, left:outHeight}, {duration:speed_out, easing:style_out});
}).mouseleave(function () {
//put corners back to the original position
$(this).find('div.topLeft').stop(false,true).animate({top:0, left:0}, {duration:speed_in, easing:style_in});
$(this).find('div.topRight').stop(false,true).animate({top:0, left:pos}, {duration:speed_in, easing:style_in});
$(this).find('div.bottomLeft').stop(false,true).animate({bottom:0, left:0}, {duration:speed_in, easing:style_in});
$(this).find('div.bottomRight').stop(false,true).animate({bottom:0, left:pos}, {duration:speed_in, easing:style_in});
}).click (function () {
//go to the url
window.location = $(this).find('a').attr('href');
});
2 つ目はホタルの効果で、関連するアニメーション コードは次のとおりです。
$.firefly.fly = function(sp) {
$(sp).animate({
top: $.firefly.random(($(window).height()-150)), //offsets
left: $.firefly.random(($(window).width()-150))
}, (($.firefly.random(10) + 5) * 1000),function(){ $.firefly.fly(sp) } );
};
どちらも単独で完全に機能します。しかし、それらを組み合わせると、少し奇妙になります。ホタルは、ホタルの画像ごとに40の同時アニメーションを作成し、それぞれにランダムな方向を割り当て、すべての「ホタル」に同じランダムな持続時間を割り当てることで機能するようです。
ここで、最初の jQuery スクリプトをマウスで入力すると、「ドア」が正常に開き、アニメーションが機能します。マウスが 'qitem' 要素の上に置かれたままの場合、ホタル アニメーションが現在の反復を終了すると、mouseleave イベントが呼び出されるように見えます。
このように、2 番目のアニメーションが最初のアニメーションにどのように影響するのでしょうか? おそらくDOMに何らかの「リセット」があり、マウスポインターを再度検出する必要があるため、マウスが「離れている」ように見えます。
これでうまく説明できたと思います。少し混乱していると思われる場合は、さらに説明を求めてください。
ご協力いただきありがとうございます。
編集 - 解決済み
はい、わかった！
いつものように、これらのことは常に非常に単純です。あなたが方法を知っているとき！スタックオーバーフローで見つけることができるすべてのjQuery mouseleave/mouseenterスレッドを読み取っていたので、解決策-z-indexにたどり着きました。
「ホタル」は、mouseleave イベントにリンクされた要素の上にカーソルを置いて移動したため、それがトリガーされました。私が修正しなければならなかったのは、mouseleave div の z-index がホタルよりも高いことを確認することだけです。単純 ：-）