Geek asks and answers

JQuery - divs do not fade out completely, after which it starts to fade

The problem is simple, I know, but I have time trying to figure it out. I have 8 sections on the page where image galleries that start on the screen are stored. When the user clicks on the icon to view the gallery, the first gallery they selected disappears in all the brilliant ones. But when they select another, the one that they are viewing starts to disappear, and the other disappears at the bottom, and then goes into the correct position when the first div is hidden.

See jsfiddle .

So my question is obvious:
How to make the gallery they were viewing completely disappear before the next one fades into the correct space.

+3
source share
4

divs position:absolute;

: http://jsfiddle.net/Ghokun/wnTte/13/

+2

(fadeOut):

, , , .

, , . divs , fadeOut * .

* , /, show/hide type. , , .

. - fadeOut() , , :

$('.icon_one').click(function() {
    $('#image_two').fadeOut(function() {
        $('#image_three').fadeOut(function() {
            $('#image_one').fadeIn();
        });
    });
});

, , . , , , .

: http://jsfiddle.net/jtbowden/XQnhs/

, HTML, :

<div id="image_one" class="imageBox" style="background-color:red;height:50px;width:50px">&nbsp;</div>  
<div id="image_two" class="imageBox" style="background-color:blue;height:50px;width:50px">&nbsp;</div>
<div id="image_three" class="imageBox" style="background-color:yellow;height:50px;width:50px">&nbsp;</div>

<div data-num="one" class="icon_show">Red</div>
<div data-num="two" class="icon_show">Blue</div>
<div data-num="three" class="icon_show">Yellow</div>

Script:

$('.icon_show').click(function() {
    var showID = '#image_' + $(this).data('num');
    $('.imageBox:visible').fadeOut(function() {
        $(showID).fadeIn(400);
    });
});

: http://jsfiddle.net/jtbowden/NAcPW/

, , . , . , index, eq.

: http://jsfiddle.net/jtbowden/NnN58/

.

+6

... , jsfiddle - . , . fadeOuts . . , - , , .

here is a little variation on your jsfiddle ..

$(function(){
        $('#image_two,#image_three').hide();

//1//       

          $('.icon_one').click(function(){                
              $('#image_two:visible,#image_three:visible').fadeOut(
                  function(){

                     $('#image_one').fadeIn();
                  }
              );
           });

//2//
alert("binding");
   $('.icon_two').click(function(){
       $('#image_one:visible,#image_three:visible').fadeOut(
            function(){
                $('#image_two').fadeIn();
             }
                                            );
  });

    //3//

   $('.icon_three').click(function(){
       $('#image_one:visible,#image_two:visible').fadeOut(function(){
        $('#image_three').fadeIn();
        });
  });

});
+3
source

how about a replacement

$('#image_one').fadeIn();

with

$('#image_one').delay(500).fadeIn();

and how wise ....

+1
source

More articles:


All Articles