liページの下部にナビゲーション リンクが配置されており、それぞれに画像が含まれています。マウスをホバーすると、画像のサイズの負の値としてliの上部がアニメーション化され、画像が上にスライドし、マウスを離れると上部が0になりました。
要件には が含まれており、divこれは各 で上昇しli、いくつかのコンテンツを持ち、 で下降しliます。さて、ここで問題が発生しますli。マウスを入力するために離れるとdiv、ドロップが一緒にliドロップdivします。マウス座標を取得し、マウスが にあるかどうかを確認するバインドmousemoveイベントを試してみましたが、正常に動作しましたが、4 回または 5 回以上試行した後、firebug でエラーが発生することなく、毎回のアニメーションが停止しました。mouseleavedivdiv
divinを含む css で試してみましたli。しかし、すべてのliについて、divはすべての左の と重なっliています。そうでなければ簡単なことでした。
以下のコードでは、bgIdeas がdiv上記で参照されています。
Javascript
a.cache.brand_nav.find("li a").hover(function (c) {
if (a.isTablet && c.currentTarget.href !== f) d.location = c.currentTarget.href;
else {
c = b(this);
c.stop(true, true).animate({ top: '-' + c.find("img").height() + 'px' }, 250, 'easeInCirc');
$('#bgIdeas').stop(true, true).animate({ bottom: '+' + c.find("img").height() + 'px' }, 500, 'easeInCirc', false);
}
},
function () {
c = b(this);
$('#bgIdeas').stop(true, true).animate({ bottom: '0px' }, 250, 'easeInCirc');
c.stop(true, true).animate({ top: '0px' }, 250, 'easeInCirc');
clearInterval(myRecFunc);
$('.bgs').fadeIn(1000).show();
continueSlideShow();
});
コメント付きのコードは、mousemove イベントをバインドして、ポインタが div にある場合に li がドロップダウンしないようにしたものです。
HTML
<ul class="clearfix">
<li>
<a style="top: 0px;" href="#" title="Ideas" class="ideas">
<span class="top">
<span class="logo">Ideas</span>
<span class="description">abc<br>
Click Here</span>
<span class="creator"><small>abc</small><br>
Click Here</span>
</span>
<img src="images/abc_thumb.jpg" alt="Ideas">
</a>
</li>
<li>
<a style="top: 0px;" href="#" title="def" class="def">
<span class="top">
<span class="logo">Def</span>
<span class="description">Def<br>
Click Here</span>
<span class="creator"><small>Def</small><br>
Click Here</span>
</span>
<img src="images/def_thumb.jpg" alt="Def">
</a>
</li>
<li>
<a style="top: 0px;" href="#" title="ghi" class="ghi">
<span class="top">
<span class="logo">ghi</span>
<span class="description">ghi<br>
Click Here</span>
<span class="creator"><small>ghi</small><br>
Click Here</span>
</span>
<img src="images/ghi_thumb.jpg" alt="ghi">
</a>
</li>
<li>
<a style="top: 0px;" href="#" title="jkl" class="jkl">
<span class="top">
<span class="logo">jkl</span>
<span class="description">jkl<br>
Click Here</span>
<span class="creator"><small>jkl</small><br>
Click Here</span>
</span>
<img src="images/jkl_thumb.jpg" alt="jkl">
</a>
</li>
<li>
<a style="top: 0px;" href="#" title="mno" class="mno">
<span class="top">
<span class="logo">mno</span>
<span class="description">mno<br>
Click Here</span>
<span class="creator"><small>mno</small><br>
Click Here</span>
</span>
<img src="images/mno_thumb.jpg" alt="mno">
</a>
</li>
</ul>