2

私は画像のセットを持っており、それぞれについて、0.5秒ほどロールオーバーして別の画像にちらつき、マウスがまだ画像の上にある場合でも（つまり、マウスアウトがない場合でも、元の画像に戻ります） ）。

setTimeoutが提案されましたが、正しく使用する方法がわかりません。

http://thepool.ie/rollover/

ページの例があります...ロールオーバーで表示される画像を表示してからすぐに消えてほしいのですが。

私は例のためにウェブを調べましたが、何も見つかりません...どんな助けでも大歓迎です。

ありがとう、アンドリュー

編集：

これは私が現在ホバー画像に使用しているコードです

$(document).ready(function(){   
$(function() {
    $('.rollover').hover(function() {
        var currentImg = $(this).attr('src');
        $(this).attr('src', $(this).attr('hover'));
        $(this).attr('hover', currentImg);
    }, function() {
        var currentImg = $(this).attr('src');
        $(this).attr('src', $(this).attr('hover'));
        $(this).attr('hover', currentImg);
    });
});

}）;

4

4 に答える 4

7

使い方setTimeoutは簡単です。多くのjQueryメソッドと同様に、最初の引数として関数を取り、2番目の引数としてミリ秒単位の時間を取ります。

私はあなたのコードから始めて、それを少しリファクタリングしました。元々、タイマーが作動する前にユーザーが画像の上にマウスを置いたり、画像から離れたり、画像の上に戻ったりすると、競合状態になる可能性がありました。これで、代替画像に切り替えて元の画像に戻すためのロジックが分離されました。画像がすでにスワップアウトされている場合は、マウスオーバーハンドラーも短絡します。$(this)また、速度を少し向上させるために、によって返されたjQueryオブジェクトをキャッシュします（jQueryオブジェクトをキャッシュすることをお勧めします）。

hover属性をdata-hover（HTML5仕様ではカスタム属性を使用できますが、で始まる必要があります）に変更data-し、マウスオーバーセレクターでその存在を確認しました。

最後に、余分なreadyラッパーを削除しました（同じで、両方$(document).ready(function(){…})を$(function(){…}用意する必要はありません）。

$(function() {
    $('.rollover[data-hover]').mouseover(function() {
        var $this = $(this), originalImage = $this.attr('src');
        if ($this.data('imagesSwapped')) {
            return;
        }
        $this.attr('src', $this.attr('data-hover')).data('imagesSwapped', true);
        setTimeout(function(){
            $this.attr('src', originalImage).removeData('imagesSwapped');
        }, 500);
    });
});

コードはテストされていません。

于 2010-05-11T17:58:48.330 に答える
0

setTimeOutよりも良い方法があります

http://api.jquery.com/mouseenter/$('.rollover').mouseenter(function() {の代わりに使用できます$('.rollover').hover(function() {

于 2012-11-19T07:09:41.517 に答える
0

何かのようなもの

$('#myid').hover(function() {
    $(this).addClass('hovered');
    setTimeout(function() { $('#myid').removeClass('hovered'); }, 100);
});
于 2010-05-11T16:43:34.750 に答える
0

ここでいくつかの明確な例を見つけることができます:

http://www.electrictoolbox.com/using-settimeout-javascript/

ただし、より使いやすいタイマープラグインを使用することを個人的にお勧めします: http://jquery.offput.ca/every/

于 2010-05-11T16:36:56.993 に答える