[英]jQuery Animation, Chaining, .each() and .animate() (or fadeIn() and fadeOut())
I'm having a bit of a trouble trying to figure this out today, i want to make 5 items inside my DOM (which is listed under the same attribute element, $('.elements')) fade in and out, and after reading up a bit on the API i thought.each() would be a fabulous idea to implement a fade in and fade out showcase gallery.我今天在尝试解决这个问题时遇到了一些麻烦,我想在我的 DOM 中制作 5 个项目(在相同的属性元素 $('.elements') 下列出)淡入和淡出,然后仔细阅读 API 我认为。each() 将是实现淡入淡出展示画廊的绝妙主意。
However, i'm currently using:但是,我目前正在使用:
$('.elements').each(function() {
$(this).fadeIn(2000).delay(200).fadeOut(2000).show();
})
but everything gets faded in and out at once.但是一切都会立即淡入淡出。
How do i do a sequential effect where everything is chained together and it starts from the first item in the list (aka - $('elements').eq(0)?) down to the last one, and then restarts again?我如何做一个顺序效果,其中所有东西都链接在一起,它从列表中的第一项(又名 - $('elements').eq(0)?)开始到最后一个,然后再次重新启动?
Do i really need a while loop to do this in javascript/jquery?我真的需要一个 while 循环来在 javascript/jquery 中执行此操作吗? I was hoping there would be a similar function that i could chain for jQuery to perform to reduce load and filesize.
我希望有一个类似的 function,我可以链接 jQuery 来执行以减少负载和文件大小。
Also, is there a way to restrict the images from overflowing out from my div?另外,有没有办法限制图像从我的 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);
}());
demo: http://jsfiddle.net/uWGVN/2/演示: http://jsfiddle.net/uWGVN/2/
updated to have it looping without end.更新为让它无限循环。
2nd update : a different, probably more readable, approach:第二次更新:一种不同的,可能更具可读性的方法:
(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));
demo: http://jsfiddle.net/uWGVN/3/演示: http://jsfiddle.net/uWGVN/3/
You can add a callback您可以添加回调
offical doc:官方文档:
('#clickme').click(function() {
$('#book').fadeOut('slow', function() {
// Animation complete.
});
});
and call the same function with i++ et $('.elements').eq(i)并使用 i++ et $('.elements').eq(i) 调用相同的 function
For your overflowing, style it with CSS:为了你的溢出,用 CSS 来设计它:
div.(class) { position:relative; overflow:hidden; }
Beautiful way:美丽的方式:
(function hideNext(jq){
jq.eq(0).hide("slow", function(){
(jq=jq.slice(1)).length && hideNext(jq);
});
})($('a'))
last first:最后第一:
(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.