简单的问题我猜。我想在每个数组元素的循环中执行jQuery淡入淡出函数。
代码:
var dlugosc = 5;
dlugosc = dlugosc*1000;
var slideIndex = 0;
carousel();
function carousel() {
var x = document.getElementsByClassName("slides");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
// here I'd like to execute this function like this: x[i].fadeOut(500);
}
slideIndex++;
if (slideIndex > x.length) {
slideIndex = 1
}
x[slideIndex-1].style.display = "block";
// and here like this: x[slideIndex-1].fadeIn(500);
setTimeout(carousel, dlugosc);
}
&#13;
我该怎么办?感谢
更新
它有效:
$(".slides")[i].style.display = "none";
那么,为什么它不起作用?
$(".slides")[i].fadeOut(500);
答案 0 :(得分:1)
我得到了它的工作。我使用了一个promise对象来确保所有的动画都是为#34; .slides&#34;完成的,因为如果我只是使用一个回调,它会在每张幻灯片中调用一次回调,这使得整个动画毫无意义。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(".slides").hide();
var waitTime = 1 * 1000;
var slideIndex = 0;
carousel();
function carousel() {
$(".slides").fadeOut(250).promise().done(function () {
$(".slides").eq(slideIndex++ % $(".slides").length).fadeIn(250);
});
setTimeout(carousel, waitTime);
}
</script>
更新以回应海报的问题:
$(&#34; .slides&#34;)是一个jQuery对象,可以以任何类似jQuery的方式进行修改(因此,fadeIn可以工作)。其中$(&#34; .slides&#34;)[0]获取.slides的第一个实例,但作为 JavaScript dom对象,不有权访问任何jQuery的功能。但是,如果你执行$(&#34; .slides&#34;)。eq(0),那么你将第一个元素作为 jQuery对象获取。然后你可以做$(&#34; .slides&#34;)。eq(0).fadeIn(500);
答案 1 :(得分:0)
vanillaJs fadeIn/fadeOut
实施的例子
只是为了理解它是如何工作的。
function fade(el, time, fadeout) {
var iterations = 25; // 25 steps of fade
var counter = iterations;
if (!fadeout) { // fadein will initialize a slide
el.style.display = 'block';
el.style.opacity = '0';
}
return new Promise(function(end){ // Promise used to determine animation end
var t = setInterval(iteration, time/iterations);
function iteration(){
if (!--counter) { // end of animation
clearInterval(t); // stop interval
if (fadeout) el.style.display = 'none'; // hide a slide
return end(); // resolve a Promise
}
el.style.opacity = fadeout ? counter/iterations : 1 - counter/iterations; // calculate current step opacity
}
});
}
function getCarousel(elements, fadeTime) {
var index = elements.length-1;
var len = elements.length;
return function carousel() {
return fade(elements[index], fadeTime, true)
.then(function(){
index = (index + 1) % len;
return fade(elements[index], fadeTime, false)
});
};
}
/*****/
var slides = document.getElementsByClassName("slides");
var carousel = getCarousel(slides, 500);
carousel();
setInterval(carousel, 2000);
&#13;
.slides {
display: none;
}
&#13;
<div class="slides">Slide 1</div>
<div class="slides">Slide 2</div>
<div class="slides">Slide 3</div>
<div class="slides">Slide 4</div>
&#13;