1

サイドバーを実現しようとしていますが、マウス カーソルの動きが止まると、2 つのナビゲーション ボタンが遅れて非表示になりました。マウスカーソルが再び移動すると、要素が表示されます。コードは正常に動作しますが...ホバー状態のときに3つの要素が非表示になるのを防ぐ方法。

ホバー状態の clearTimeout をどこに追加すればよいですか? するべきか？申し訳ありませんが、私はjQueryの初心者です。

これが私のコードです：

html:

<div class="container">
<nav>
    <ul>
        <li><a href="#">something</a></li>
    </ul>
</nav>
<div class="prev">prev</div>
<div class="next">next</div>
</div>

CSS

.container { position: absolute; left: 20px; top: 2px; right:2px; bottom: 20px; border: 1px solid red; }
nav { position: absolute; left: 0; top:0; bottom: 0; border: 1px solid blue; }
.prev { position: absolute; width: 50px; height: 30px; bottom: 0; left: 45%; border: 1px solid green; }
.next { position: absolute; width: 50px; height: 30px; top: 0; left: 45%; border: 1px solid green; }

JS

var timeout = false;
var count = $(function() {
$('.container').mousemove(function(e) {
    clearTimeout(timeout);
    timeout = setTimeout(function() {
        console.log('hide slideshow elements');
        $('.container nav').fadeOut();
        $('.prev').fadeOut();
        $('.next').fadeOut();
    }, 2500);            
});
});

$(".container").mousemove(function() {
console.log('show slideshow elements');
$('.container nav').fadeIn();
$('.prev').fadeIn();
$('.next').fadeIn();
});

そしてJSfiddle

http://jsfiddle.net/h3wDt/3/

4

2 に答える 2

2

イベント ターゲット tagname を調べて、それがアンカー タグであるかどうかを確認しました。も働いたようです。

var timeout = false;
var count = $(function() {
    $('.container').mousemove(function(e) {
        $('.container nav').fadeIn();
        $('.prev').fadeIn();
        $('.next').fadeIn();
        clearTimeout(timeout);
        if (e.target.tagName != "A") {
            timeout = setTimeout(function() {
                console.log('hide slideshow elements');
                $('.container nav').fadeOut();
                $('.prev').fadeOut();
                $('.next').fadeOut();
            }, 2500);            
        }
    });
});

JSフィドル

于 2013-03-05T03:33:55.493 に答える
1

ナビを超えているかどうかを格納する変数を追加しhoverます。最善の方法ではないかもしれませんが、機能します

http://jsfiddle.net/h3wDt/5/

于 2013-03-05T03:27:39.923 に答える