Issues with jQuery slider's fadeIn and fadeOut functionalities are causing unexpected behavior

Question

Issues with jQuery slider's fadeIn and fadeOut functionalities are causing unexpected behavior

A question surfaced when implementing a jQuery slider with the help of another user on this website. The issue arose when transitioning the code from the working fiddle to my computer, resulting in a problem that needs addressing. Here is the original fiddle:

http://jsfiddle.net/CWkQE/14/

The code structure is quite straightforward - images are hidden using a 'hide' class and then faded in/out during transitions.

$("active image").fadeIn();
$("to hide image").fadeOut();
$("to hide image").fadeOut();
$("to hide image").fadeOut();

However, an issue has arisen which needs attention.

(Note: GIFs may take time to load, if not visible, here's the direct link:

This sped-up GIF highlights the problem where clicking a button causes the current image to disappear, followed by a slight delay before the next image loads. I attempted to use .delay() but encountered no success.

jquery html css transition smoothing

Answer 1

Answer №1

html

<div id="cycler" style="position:fixed;top:0;">
        <img class="active" src="http://www.gettyimages.com/CMS/StaticContent/1357941082241_new_banner-700x465.jpg" alt="Hoverfly on a green leaf" title="Hoverfly on a green leaf" width="506" height="337" />
        <img src="http://www.royaltyfreeimages.net/wp-content/uploads/2010/09/royalty-free-images-mushroom-500x375.jpg" alt="Fly on a pink flower" title="Fly on a pink flower" width="506" height="337"  />
        <img src="http://www.menucool.com/slider/prod/image-slider-1.jpg" alt="Insect on a leaf" title="Platycheirus granditarsus (I think) on a leaf" width="506" height="337"  />

    </div>
    <div style="margin-top:350px;">
    <button onclick="cycleImages(1)">1</button>
    <button onclick="cycleImages(2)">2</button>
    <button onclick="cycleImages(3)">3</button>
</div>

css

#cycler{position:relative;}
#cycler img{position:absolute;z-index:1;background-color:white}
#cycler img.active{z-index:3}

script

function cycleImages(n){
      var $active = $('#cycler .active');
      var $next = $('#cycler img:nth-child('+n+')');
      $next.css('z-index',2);
      $active.fadeOut(1500,function(){
          $active.css('z-index',1).show().removeClass('active');
          $next.css('z-index',3).addClass('active');
      });
    }

fiddle http://jsfiddle.net/vishnurajv/7wPbd/

If you need a dynamic slideshow, I recommend checking out flexslider

Answer 2

html

<div id="cycler" style="position:fixed;top:0;">
        <img class="active" src="http://www.gettyimages.com/CMS/StaticContent/1357941082241_new_banner-700x465.jpg" alt="Hoverfly on a green leaf" title="Hoverfly on a green leaf" width="506" height="337" />
        <img src="http://www.royaltyfreeimages.net/wp-content/uploads/2010/09/royalty-free-images-mushroom-500x375.jpg" alt="Fly on a pink flower" title="Fly on a pink flower" width="506" height="337"  />
        <img src="http://www.menucool.com/slider/prod/image-slider-1.jpg" alt="Insect on a leaf" title="Platycheirus granditarsus (I think) on a leaf" width="506" height="337"  />

    </div>
    <div style="margin-top:350px;">
    <button onclick="cycleImages(1)">1</button>
    <button onclick="cycleImages(2)">2</button>
    <button onclick="cycleImages(3)">3</button>
</div>

css

#cycler{position:relative;}
#cycler img{position:absolute;z-index:1;background-color:white}
#cycler img.active{z-index:3}

script

function cycleImages(n){
      var $active = $('#cycler .active');
      var $next = $('#cycler img:nth-child('+n+')');
      $next.css('z-index',2);
      $active.fadeOut(1500,function(){
          $active.css('z-index',1).show().removeClass('active');
          $next.css('z-index',3).addClass('active');
      });
    }

fiddle http://jsfiddle.net/vishnurajv/7wPbd/

If you need a dynamic slideshow, I recommend checking out flexslider

Issues with jQuery slider's fadeIn and fadeOut functionalities are causing unexpected behavior

Answer №1

Similar questions

Creating a collision mechanism that functions with rotation

Retaining the position of jQuery tabs upon page refresh

Exploring potential methods for generating a PDF invoice in PHP and CodeIgniter by utilizing HTML elements

Substitute form input loading

Just starting out with json/ajax and I received an error in the Console that says: Uncaught TypeError: Cannot read property 'length' of undefined

Tips for rearranging the icon placement of the parent menu item on Bootstrap Navigation Bar for mobile display

Aligning the Bootstrap 5 Accordion Button in the Center and Adding Line Breaks

Tips on changing tabs by simply clicking the save button or linking the save button to tab-switching functionality

I aim to retrieve the value of the input textbox located alongside the button using jQuery

Finding the index of a selected option in node.js can be achieved using express

Using AngularJS to add an element to an array based on a specified condition

Having trouble interpreting JSON data sent back from a JQuery ajax request

Looking to conceal content on the navbar background using Bootstrap

Leverage jquery to adjust the height or width of an element depending on which dimension is larger

Why is my md-button in Angular Material displaying as full-width?

Leverage jQuery to organize and categorize JSON information received through an Ajax call

jQuery refusing to delete class

Creating the x and y coordinates for drawImage in HTML5

How can you choose an element by referencing data within one of its child elements?

Execute Code After Function Completion OR DIV Shows Up