web-dev-qa-db-ja.com

JqueryのCSS関数を遅らせますか？

JqueryでCSSの変更を遅らせるにはどうすればよいですか？これが私のコードです：

$("document").ready(function() {
    $(".pressimage img").mouseenter(function() {
        $jq(this).css('z-index','1000');
            });
    $(".pressimage img").mouseleave(1000,function() {
        $jq(this).css('z-index','1');
            });
});

マウスが離れてから約1/2秒後にmouseleave関数が発生する必要があります。

他のjqueryを使用して、マウスオーバーで画像を展開します。拡大するとお互いを覆うので、アニメーション画像のz-indexを他より高くする必要があります。次に、マウスが離れると、z-indexは通常に戻らなければなりません。

上記のコードは、マウスが離れるとすぐにz-indexが変更されることを除いて機能するため、アニメーションを完了する時間がありません。したがって、mouseleave関数を少し遅らせる必要があります。ありがとう

更新

これが私のサイトです： http://smartpeopletalkfast.co.uk/ppr6/press

私は自分のコードを頭に入れました：

 $jq("document").ready(function() {

    $jq(".pressimage img").mouseenter(function() {
        $jq(this).css('z-index','100');
            });

    $jq(".pressimage img").mouseleave(function() {
        $jq(this).css('z-index','1');
            });

});

このコードは正常に機能していますが、遅延はありません。左上の画像にカーソルを合わせると正常に機能しますが、マウスをオフにするとすぐに下の画像の後ろに移動します。ありがとう

jquerydelay
14
Evanss

これを試して：

$(".pressimage img").mouseleave( function(){
    var that = this;
    setTimeout( function(){
      $(that).css('z-index','1');
    },500);
 });
20
Ken Redler

遅延はキュー内のアイテムでのみ機能するため、遅延を機能させるには、cssの変更をキューに追加する必要があります。次に、デキューします。次のコードはこれを示しています。

$('.pressimage img')
    .delay(1000)
    .queue(function(){
        $(this).css({'z-index','1'});
        $(this).dequeue();
    });
14
sanon

上記のsanonのソリューションは、同じ目的で.queueを悪用する代わりに、jQueryの.animateメソッドを使用するため、これよりも自然であることに注意してください。

以下の元の答え：

setTimeoutが最も自然な方法ですが、jQuery関数チェーンにとどまりたい場合は、期間0のアニメーション関数を使用できます。

例：

$("img").delay(1000).animate({'z-index': 1000},0)

数値のcss変更以外のことをしたい場合は、関数を作成する必要がありますが、それでもそのアニメーション呼び出し内で発生する可能性があります。

$("img").delay(1000).animate({zoom:1},0,function(){$(this).src('otherImage.png');})

空のオブジェクト{}を指定すると、実際の効果とは見なされないため、そのzoom：1をそこに配置しているだけなので、効果キューには入れられないため、すぐに完全な関数が実行されます。

3
Sygmoral

これはsetTimeout（）;で実行できます。

$("document").ready(function() {
    var timer;
    $(".pressimage img").mouseenter(function() {
        $jq(this).css('z-index','1000');
        clearTimeout(timer);
    });
    $(".pressimage img").mouseleave(1000,function() {
         timer = setTimeout(function(){
            $jq(this).css('z-index','1');
         }, 500);
    });
});

SetTimeout（code、delay）のコードは、delayミリ秒後に実行されます。マウスの動きが速すぎると、意図しない変更で問題が発生する可能性があるため、mouseenter（）のタイムアウトアクションをクリアしました。

1
Surreal Dreams

http://forum.jquery.com/topic/delay-css

アニメーションに続いてcssプロパティを遅らせるという私の目的のためにテストされ、動作しています。

0
Bleh

次のことを試してください。

jQuery.fn.extend({
    qcss: function(map){
        $(this).queue(function(next){ 
            $(this).css(map); 
            next(); 
        });

        return this;
    }
});
0
funatti
$("document").ready(function() {
$(".pressimage img").mouseenter(function() {
    $jq(this).css('z-index','1000');
        });
$(".pressimage img").mouseleave(1000,function() {
    $jq(this).delay(500).css('z-index','1');
        });
});

これは機能しますか？ :)

0
Milaan

http://jsfiddle.net/loktar/yK5ga/

私が行っていることの1つは、変数にタイムアウトを割り当ててから、マウスオーバー時にそれをクリアすることです。これにより、マウスオーバーをすばやく実行しても起動しません。

$("document").ready(function() {
    var imgTimeout;

    $("img").hover(
        function() {
            clearTimeout(imgTimeout);
            $(this).css('z-index','1000');
    },
    function() {
        var element = $(this);
        imgTimeout = setTimeout(function(){element.css('z-index','1');}, 1000); 
    });
});
0
Loktar