6

タイトルを表示するネストされたスパンを持つシンプルなギャラリーグリッドがあります。これをマウスオーバーで上にスライドし、マウスアウトで非表示にします。

マウスがタイトルのある場所に移動したり、タイルの下からタイルの外にホバリングしたりする場合を除いて、すべてが正常に機能します。その後、ホバー効果が制御不能に数回繰り返されます。

最初はホバートリガーであるアンカーにスパンが入っているのではないかと思いましたが、外に出すのもうまくいきませんでした。

何か案は ？

デモはこちら：http ：//www.winterealm.com/gallery/

マークアップ：

<div class="gallery_container">
    <ul>
        <li><a href=""><img src="assets/img/artistisch.jpg" alt="aaa"/><span class="title">Category A</span></a></li>
        <li><a href=""><img src="assets/img/attraktiv.jpg" alt="bbb"/><span class="title">Category B</span></a></li>
        <li><a href=""><img src="assets/img/historisch.jpg" alt="ccc"/><span class="title">Category C</span></a></li>
        <li><a href=""><img src="assets/img/popart.jpg" alt="ddd"/><span class="title">Category D</span></a></li>
        <li><a href=""><img src="assets/img/portrait.jpg" alt="eee"/><span class="title">Category E</span></a></li>
        <li><a href=""><img src="assets/img/sketch.jpg" alt="fff"/><span class="title">Category F</span></a></li>
    </ul>
</div>

これがjqueryです

$(document).ready(function(){
    $('.gallery_container a').mouseover(function(){
        $(this).children('.title').animate({
            opacity: 100,
            bottom: 0
        },200);
    });

    $('.gallery_container a').mouseout(function(){
        $(this).children('.title').animate({
            opacity: 0,
            bottom: -30
        },200);
    });
});
4

3 に答える 3

8

ここでの問題は、マウスが1つまたは複数の子要素の上を移動するたびにマウスオーバーが発生することです。代わりに、mouseenterイベントとmouseleaveイベントを使用してみてください。

于 2011-08-24T06:16:14.700 に答える
4

これを試して。

$(document).ready(function() {
$('.gallery_container a').hover(function() {
    $(this).children('.title').stop().animate({
        opacity: 100,
        bottom: 0
    }, 200);
}, function() {
    $(this).children('.title').stop().animate({
        opacity: 0,
        bottom: -30
    }, 200);
}); 
});

ここでライブデモを見ることができます。-http ://jsfiddle.net/8Hd7s/

于 2011-08-24T06:15:58.897 に答える
0

したがって、次のように、非常に単純なロックメカニズムを実装することをお勧めします。 

var fCurrentlyMoving = false;       
$('.gallery_container a').mouseover(function(){
    if (!fCurrentlyMoving) {
        fCurrentlyMoving = true;
        $(this).children('.title').animate({
            opacity: 100,
            bottom: 0
        },200, function() {
            fCurrentlyMoving = false;
        });
    }
});

競合状態に関しては気密ではありませんが、そうである必要はありません。

于 2011-08-24T06:12:16.743 に答える