JS滑块在褪色时跳来跳去

Question

I have an issue with my js slider where by the behaviour is odd. I am calling Jquery at the top in the header. the JS script is at the bottom.

The issue when the page loads it shows all three of the slides and quickly shows the first one and hides the other two. When they fad in and out to the next slides etc the content jumps down.

You can see the behaviour here: Demo

And here is the 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

Just put position:absolute on the ul lì .

ul li {
  position:absolute
}

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

You had it position:static , which keeps it in the document flow and pushes other elements away https://developer.mozilla.org/en-US/docs/Web/CSS/position#Values .

Answer 2

Call the fadeIn function after the fadeOut function is complete.

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

its because your transition in and out happen simultaneously - so the in fade creates an element below the out element. try something like this:

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

fiddle

Answer 4

Here an updated jsfiddle : http://jsfiddle.net/9L55zh9o/5/

The fadeout takes time, so you have to defer the fadein in a callback function:

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

You can also hide all slides at startup with slides().hide(); .

Answer 5

Working jsfiddle here 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);

Your transitions are happening simultaneously so it isn't transitioning smoothly. You should also hide the elements initially instead of fading out to prevent the initial behavior.