Question

简单的问题我猜。我想在每个数组元素的循环中执行jQuery淡入淡出函数。

代码：

＆＃13;

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);

Answer 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）;

Answer 2

vanillaJs fadeIn/fadeOut实施的例子 _{只是为了理解它是如何工作的。}

＆＃13;

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;

JS和jQuery，执行淡入淡出功能

2 个答案: