jQuery的延遲淡入效果

我只是試圖做兩個簡單的adjutments這個片段：jQuery的延遲淡入效果

$(document).ready(function() { 
    $("span#poweroff a").click(function() { 
     $("body").append('<div class="overlay"></div>'); 
    }); 
});

首先我想body.append行動發生一段時間。這只是一個停電覆蓋，但我想淡入？

其次，當你把光標移動「跨度＃執行poweroff一個」我想，在一定的時間量後，顯示「跨度＃執行poweroff一個.message」，也由fadeing。

任何大師的在那裏肯救了我，我可以相當長時間地反覆試驗，並讓我平靜下來？非常感謝！

來源

2010-12-06 Fuego DeBassi

您需要硬編碼覆蓋DIV這樣的：

<div class="overlay" style="display:none;"></div>

然後jQuery的，像這樣：

$(document).ready(function() { 
    $("span#poweroff a").click(function() { 
     $('.overlay').fadeIn('slow'); 
    }); 
});

如果我正確認識你，當有人點擊跨度＃關機它會慢慢顯示覆蓋div。

我給你的問題是，當你點擊它並顯示.overlay之前，你將鼠標放在跨度＃poweroff a上時會發生什麼？如果你點擊它將激活延遲的節目，因爲你必須將它懸停在它上面點擊它。

這裏是jQuery的不處理，如果我們需要等待覆蓋可見：

$(document).ready(function() { 
     $("span#poweroff a").mouseenter(function() { 
      $('.message').fadeIn('slow'); 
     }); 
     $("span#poweroff a").mouseleave(function() { 
      $('.message').fadeOut('slow'); 
     }); 
    });

來源

2010-12-06 03:45:35

嘗試.delay()。這可能是你要找的。至於你的代碼，這裏是你可能尋找的功能：

$(document).ready(function() 
{ 
    $('span#poweroff').click(function() 
    { 
    $('body').append('<div class="overlay"></div>'); /* Make sure it's hidden via CSS, and has *some* uniqueness. */ 
    $('.overlay:eq(0)').fadeIn(); /* ':eq(0)' selects the first .overlay element. If you want all of them to animate, remove ':eq(0)'. I would use an ID for this, though, so if you decide to, replace the selector with '#your_id'. It's not too hard */ 
    }); 

    $('span#poweroff a').hover(function() 
    { 
    $('span#poweroff a .message').delay(1000)fadeIn(); /* You can set your speeds here too. If you won't use the delay, just omit the function. */ 
    }, function() { 
    $('span#poweroff a .message').fadeOut(); /* If you want to, it can fade out. Otherwise, omit this function. */ 
    }); 
});

這將作爲工作的一個粗略的框架（沒有保證，因爲我是臭名昭著的讓小錯誤）。

祝你好運！

來源

2010-12-06 03:54:01 Blender

jQuery的延遲淡入效果

回答

相關問題