作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我试图将每张图片延迟一秒。但是延迟似乎不起作用。
$( document ).ready(function() {
$("#logo1").slideToggle(1000,"easeOutBounce");
$("#logo2").delay(1000).slideToggle(1000,"easeOutBounce");
$("#logo3").delay(2000).slideToggle(1000,"easeOutBounce");
$("#logo4").delay(3000).slideToggle(1000,"easeOutBounce");
$("#logo5").delay(4000).slideToggle(1000,"easeOutBounce");
$("#logo6").delay(5000).slideToggle(1000,"easeOutBounce");
$("#logo7").delay(6000).slideToggle(1000,"easeOutBounce");
$("#logo8").delay(7000).slideToggle(1000,"easeOutBounce");
$("#logo9").delay(8000).slideToggle(1000,"easeOutBounce");
$("#logo10").delay(9000).slideToggle(1000,"easeOutBounce");
$("#logo11").delay(10000).slideToggle(1000,"easeOutBounce");
$("#logo12").delay(11000).slideToggle(1000,"easeOutBounce");
$("#logo13").delay(12000).slideToggle(1000,"easeOutBounce");
});
和 HTML
<img src="images/logo/L.png" id="logo1" />
<img src="images/logo/Y.png" id="logo2" />
<img src="images/logo/O.png" id="logo3" />
<img src="images/logo/N.png" id="logo4" />
<img src="images/logo/S.png" id="logo5" />
<img src="images/logo/&.png" id="logo6" />
<img src="images/logo/S.png" id="logo7" />
<img src="images/logo/H.png" id="logo8" />
<img src="images/logo/A.png" id="logo9" />
<img src="images/logo/N.png" id="logo10" />
<img src="images/logo/N.png" id="logo11" />
<img src="images/logo/A.png" id="logo12" />
<img src="images/logo/N.png" id="logo13" />
CSS 将图像一个接一个地放置。
请有人看一下。
谢谢。
最佳答案
来自文档:
The .delay() method is best for delaying between queued jQuery effects.
例如
$('#test').show().delay(1000).hide();
对于你的情况,我建议
<强>1。链接它
$("#logo1").slideToggle(1000,"easeOutBounce", function()
{
$("#logo2").slideToggle(1000,"easeOutBounce", function()
{
// do something after logo2 finished sliding.
// keep doing this until logo13..
});
});
<强>2。使用延迟对象
$(function(){
function slide(elem)
{
var deferred = $.Deferred();
$(elem).slideToggle(1000,"easeOutBounce", function()
{
deferred.resolve();
});
return deferred.promise();
}
var logos = ['#logo1', '#logo2', '#logo3'];
var i = 0;
function runSlider()
{
slide(logos[i]).done(function(){
i++;
if (logos[i] != null) runSlider();
});
}
});
不过我更喜欢第二个。顺便说一句,我还没有测试过这段代码。祝你好运。
关于javascript - 如何为 slideToggle 添加延迟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33720161/
我是一名优秀的程序员,十分优秀!