jQuery一次在div内的p个标签中循环.fadeIn和.fadeOut [英] jQuery looping .fadeIn and .fadeOut of p tags within div one at a time
问题描述
下面的代码在一个推荐书中成功淡入6秒，等待3秒，然后淡出并移至下一个.一旦到达第三次推荐，它就会跳回到第一次.这正是我想要的，但是在我的实际网站上，我有3个以上的推荐书，将来可能还会增加更多.我不想每次添加新的推荐书时都回去添加新的功能.我花了一段时间尝试使用"this"和.next()使其工作，但失败了.我希望有人可以通过循环它并使它移到容器中的下一个p标签而不每次都调用新函数的方式来提高效率.感谢您的任何帮助，谢谢.
The code below successfully fades in one testimonial for 6 seconds, waits 3 seconds, and then fades it out and moves on to the next. Once it reaches the third testimonial it jumps back to the first. This is exactly what I want but on my actual site I have more than three testimonials and in the future may be adding more. I don't want to have to go back and add a new function every time I add a new testimonial. I tried for some time to get this to work using "this" and .next() but failed. I'm hoping someone could make this much more efficient by looping it and getting it to move to the next p tag within the container without calling a new function every time. Any help is appreciated, thank you.
注意:我知道有类似的问题，但没有一个完全相同，答案均低于标准水平.
Note: I know there are similar questions but none of them were quite the same and the answers are sub par.
<!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>
推荐答案
这是一个非常简单的解决方案:
This is a very simple solution:
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());
可重复使用的插件版本:
而不是遍历某个元素的子元素，而是遍历所选元素.
Instead of iterating over the children of a certain element, it iterates over the selected elements.
(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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
