JS滑塊在褪色時跳來跳去

Question

我的js滑塊有個問題，按行為來說是奇怪的。 我在標題頂部調用Jquery。 JS腳本在底部。

頁面加載時出現的問題顯示了所有三張幻燈片，並迅速顯示了第一張幻燈片並隱藏了另外兩張幻燈片。 當他們淡入和淡出到下一張幻燈片等內容時，內容會跳下來。

您可以在此處查看行為： 演示

這是JS

// settings
var $slider = $('.slider'); // class or id of carousel slider
var $slide = 'li'; // could also use 'img' if you're not using a ul
var $transition_time = 1000; // 1 second
var $time_between_slides = 3000; // 4 seconds

function slides(){
  return $slider.find($slide);
}

slides().fadeOut();

// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);

// auto scroll 
$interval = setInterval(
    function(){
      var $i = $slider.find($slide + '.active').index();

      slides().eq($i).removeClass('active');
      slides().eq($i).fadeOut($transition_time);

      if (slides().length == $i + 1) $i = -1; // loop to start

      slides().eq($i + 1).fadeIn($transition_time);
      slides().eq($i + 1).addClass('active');
    }
    , $transition_time +  $time_between_slides 
);

Answer 1

只要把position:absolute的ul lì 。

ul li {
  position:absolute
}

JSFIDDLE： http : //jsfiddle.net/9L55zh9o/2/ 。

您擁有了position:static ，它將其保留在文檔流中 ，並將其他元素推開https://developer.mozilla.org/en-US/docs/Web/CSS/position#Values 。

Answer 2

當fadeOut功能完成后，調用fadeIn功能。

http://jsfiddle.net/9L55zh9o/1

function () {
    var $i = $slider.find($slide + '.active').index();

    slides().eq($i).removeClass('active');
    slides().eq($i).fadeOut($transition_time, function(){
        if (slides().length == $i + 1) $i = -1; // loop to start

        slides().eq($i + 1).fadeIn($transition_time);
        slides().eq($i + 1).addClass('active');
    });
}, $transition_time + $time_between_slides);

Answer 3

這是因為您的移入和移出是同時發生的-因此入淡入會在out元素下方創建一個元素。 嘗試這樣的事情：

// settings
var $slider = $('.slider'); // class or id of carousel slider
var $slide = 'li'; // could also use 'img' if you're not using a ul
var $transition_time = 1000; // 1 second
var $time_between_slides = 3000; // 4 seconds

function slides() {
  return $slider.find($slide);
}

slides().fadeOut();

// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);

// auto scroll 
$interval = setInterval(

function () {
 var $i = $slider.find($slide + '.active').index();

 slides().eq($i).removeClass('active');
 slides().eq($i).fadeOut($transition_time/2, function(){
     if (slides().length == $i + 1) $i = -1; // loop to start

     slides().eq($i + 1).fadeIn($transition_time/2);
     slides().eq($i + 1).addClass('active');
 });


}, $transition_time + $time_between_slides);

小提琴

Answer 4

這里是更新的jsfiddle ： http : //jsfiddle.net/9L55zh9o/5/

fadeout需要時間，因此您必須在回調函數中延遲fadein ：

slides().eq($i).fadeOut($transition_time, function() {
    if (slides().length == $i + 1) $i = -1; // loop to start
    slides().eq($i + 1).fadeIn($transition_time);
    slides().eq($i + 1).addClass('active');  
});

您還可以在啟動時使用slides().hide();隱藏所有幻燈片slides().hide(); 。

Answer 5

在這里工作jsfiddle http://jsfiddle.net/bevanr01/705u9w1a/

// settings
var $slider = $('.slider'); // class or id of carousel slider
var $slide = 'li'; // could also use 'img' if you're not using a ul
var $transition_time = 1000; // 1 second
var $time_between_slides = 3000; // 4 seconds

function slides() {
    return $slider.find($slide);
}

slides().hide();

// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);

// auto scroll 
$interval = setInterval(

function () {
    var $i = $slider.find($slide + '.active').index();

    slides().eq($i).removeClass('active');
    slides().eq($i).fadeOut($transition_time,
                        function() {
    if (slides().length == $i + 1) $i = -1; // loop to start

    slides().eq($i + 1).fadeIn($transition_time);
    slides().eq($i + 1).addClass('active');                                
  });


}, $transition_time + $time_between_slides);

您的過渡同時發生，因此過渡不順利。 您還應該最初隱藏元素，而不是淡出以防止出現初始行為。