- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
下面的代码成功淡入一个感言 6 秒,等待 3 秒,然后淡出并转到下一个感言。一旦到达第三个推荐,它就会跳回第一个。这正是我想要的,但在我的实际网站上,我有超过三个推荐,并且将来可能会添加更多。我不想每次添加新的推荐时都必须返回并添加新功能。我尝试了一段时间使用“this”和 .next() 让它工作但失败了。我希望有人可以通过循环它并使其移动到容器内的下一个 p 标签来提高效率,而不必每次都调用新函数。感谢任何帮助,谢谢。
注意:我知道有类似的问题,但没有一个是完全相同的,而且答案也低于标准。
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
#tml-container p { display: none; }
</style>
</head>
<body>
<div id="tml-container">
<p id="one">Testimonial 1</p>
<p id="two">Testimonial 2</p>
<p id="three">Testimonial 3</p>
</div>
<script>
$(document).ready(function() {
function doFade() {
$("#one").fadeIn(6000,function() {
$("#one").fadeOut(6000).delay(3000);
setTimeout(fadeTwo,6000);
});
}
function fadeTwo() {
$("#two").fadeIn(6000,function() {
$("#two").fadeOut(6000).delay(3000);
setTimeout(fadeThree,6000);
});
}
function fadeThree() {
$("#three").fadeIn(4000,function() {
$("#three").fadeOut(6000).delay(3000);
setTimeout(doFade,6000);
});
}
doFade();
});
</script>
</body>
</html>
最佳答案
这是一个非常简单的解决方案:
function fade($ele) {
$ele.fadeIn(6000).delay(3000).fadeOut(6000, function() {
var $next = $(this).next('p');
// if there is a following `p` element, it is faded in
// otherwise start from the beginning by taking
// the parent's first child
fade($next.length > 0 ? $next : $(this).parent().children().first());
});
};
fade($('#tml-container > p').first());
<小时/>
可重复使用的插件版本:
它不是迭代某个元素的子元素,而是迭代选定的元素。
(function($) {
var default_config = {
fadeIn: 3000,
stay: 3000,
fadeOut: 3000
};
function fade(index, $elements, config) {
$elements.eq(index)
.fadeIn(config.fadeIn)
.delay(config.stay)
.fadeOut(config.fadeOut, function() {
fade((index + 1) % $elements.length, $elements, config);
});
}
$.fn.fadeLoop = function(config) {
fade(0, this, $.extend({}, default_config, config));
return this;
};
}(jQuery));
可用作:
$('#tml-container > p').fadeLoop({fadeIn: 6000, stay: 3000, fadeOut: 6000});
关于jQuery 在 div 内一次循环 p 标签的 .fadeIn 和 .fadeOut,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8616395/
我正在尝试这个: var notifications = $( "#notifications" ); notifications.fadeOut("slow") .complete(func
我的印象是,下面的回调函数中的 css 规则只有在 fadeOut 完成后才会执行。事实似乎并非如此。回调函数中的行实际上是在单击时执行的。有什么想法我哪里出错了吗? $('a.close_link,
我有一个 ID 为 basket 的元素,当鼠标悬停在另一个元素上时,会显示另一个元素,但该元素既不是第一个元素的子元素,也不是第一个元素的直接同级元素。我希望这是有道理的。 当我将鼠标移出第一个或第
我有三个李: Don't show again 看起来是这样的: 当用户按下不再显示时,我想在 3 秒后删除这些 li-s。 所以我只需要删除它们的代码。
我收到此错误: Uncaught TypeError: Object [object Object] has no method 'fadeout' 这是我的代码: // Fade out the S
当我使用 jQuery fadeOut 方法时,我遇到了一个特殊的问题。 当我使用下面的代码时,它会淡出。 $('#id').fadeOut("慢"); 但是当我使用下面的代码时,它并没有淡出,它只是
当用户单击“否”时,我的 .fadeOut() 无法正常工作,我知道这是因为 div.confirm 嵌入了span,这是调用 .fadeIn() 函数的地方。 我正在开发一个需要此 HTML 层次结
基本上,我试图通知用户他们是否成功添加了他们的文件,并且通知在 3 秒后消失。问题是我的整个页面都消失了,而不仅仅是通知。它与我的其他页面一起工作,只是想知道为什么它在这个页面上的工作方式不同。 se
我一直在网上搜索,找不到我的问题的答案,所以我会尝试自己做,并希望最好! 我有一个提供欢迎然后淡出的主舞台,但我想在淡出消失的那一刻切换舞台!有人对此有答案吗? 下面的小代码可以更好地理解: impo
我使用以下 HTML 代码: User's email is duplicated! 设置警报超时的JS是, $scope.ErrorAlert = false; setTimeou
我有一个 它有一个 CSS 背景图像。在 CSS 中,我有 :hover 伪类来更改背景位置。 我想fadeIn和 fadeOut使用 jQuery 的两个不同的背景图像。我不想为背景位置设置动画,但
我正在尝试为我正在开发的博客制作一个导航菜单,目前我正在尝试将其设置为单击“主页”选项卡时其他两个选项卡淡出的位置。我不知道为什么这段代码不起作用,因为它是非常简单的几行代码。我不会添加 CSS,因为
我是新手,我只想在移动完成后在我的文本移动中添加淡出效果。但问题是我已经将@keyframe 淡出。和.fadeout。但它没有用。有什么帮助吗?谢谢。这是代码。 HTML Wat
非常简单的前提。我有一个 float 图像,我想显示它背后的图像。在 chrome 中工作正常,但在 FF 11 中不行。 $("#floater").fadeOut("slow");
我正在开发一个导航栏,上面有一个图像并且那里有链接。当用户悬停这些链接时,它会将背景更改为导航栏悬停图像,并通过 CSS 的 background-position 属性指定其位置。现在我想让我网站上
我的 slider 有一些问题。我有彩色 div(在原始元素中是图像)和上面的文字。我想要的是: 淡入背景色 文本淡入 淡出文本 淡出背景色。 听起来很简单,但我无法获得这种效果。我不能及时淡出文本,
我对 .attr jQuery 方法有疑问。我想在点击时创建 4 个事件:淡出、延迟、更改 src 属性和淡入。我有这段代码: $( "#button" ).click(function() {
我最近一直在玩 jQuery,我决定制作这个简单的待办事项列表应用程序。我的代码的问题是,当我检查不是第一项的元素时,fadeOut() 函数不起作用。然而,在检查第一项之后,它开始为所有其他元素工作
默认情况下,我隐藏了几个 DIV,然后当用户单击某个按钮时我将它们淡入。这很好用,但是当我尝试使用所述 .holder DIV 中的跨度关闭 .holder DIV 时,只有第一个有效。当我点击其他人
我有一个包含图像和 .png 纹理的主页,它是每个图像上的伪元素。我需要这个 .png 纹理在悬停时 FadeOut。按原样配置后,我该如何实现该功能?还是通过更改当前设置更容易实现? @import
我是一名优秀的程序员,十分优秀!