[英]jQuery Animation, Chaining, .each() and .animate() (or fadeIn() and fadeOut())
我今天在尝试解决这个问题时遇到了一些麻烦,我想在我的 DOM 中制作 5 个项目(在相同的属性元素 $('.elements') 下列出)淡入和淡出,然后仔细阅读 API 我认为。each() 将是实现淡入淡出展示画廊的绝妙主意。
但是,我目前正在使用:
$('.elements').each(function() {
$(this).fadeIn(2000).delay(200).fadeOut(2000).show();
})
但是一切都会立即淡入淡出。
我如何做一个顺序效果,其中所有东西都链接在一起,它从列表中的第一项(又名 - $('elements').eq(0)?)开始到最后一个,然后再次重新启动?
我真的需要一个 while 循环来在 javascript/jquery 中执行此操作吗? 我希望有一个类似的 function,我可以链接 jQuery 来执行以减少负载和文件大小。
另外,有没有办法限制图像从我的 div 溢出?
(function loop() {
$('.elements').each(function() {
var $self = $(this);
$self.parent().queue(function (n) {
$self.fadeIn(2000).delay(200).fadeOut(2000, n);
});
}).parent().promise().done(loop);
}());
演示: http://jsfiddle.net/uWGVN/2/
更新为让它无限循环。
第二次更新:一种不同的,可能更具可读性的方法:
(function fade(idx) {
var $elements = $('.elements');
$elements.eq(idx).fadeIn(2000).delay(200).fadeOut(2000, function () {
fade(idx + 1 < $elements.length ? idx + 1 : 0);
});
}(0));
您可以添加回调
官方文档:
('#clickme').click(function() {
$('#book').fadeOut('slow', function() {
// Animation complete.
});
});
并使用 i++ et $('.elements').eq(i) 调用相同的 function
为了你的溢出,用 CSS 来设计它:
div.(class) { position:relative; overflow:hidden; }
美丽的方式:
(function hideNext(jq){
jq.eq(0).hide("slow", function(){
(jq=jq.slice(1)).length && hideNext(jq);
});
})($('a'))
最后第一:
(function hideNext(jq){
jq.eq(jq.length-1).hide("slow", function(){
(jq=jq.slice(0,length-1)).length && hideNext(jq);
});
})($('a'))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.