jQuery fadeOut is not changing display property

问题

On http://judi.simpleupdates.com/ I am attempting to make a slideshow of images on a page using the jQuery fadeIn and fadeOut effects. Both items fadeIn without issue. However, fadeOut is not changing the display property of the div that is supposed to disappear. Any ideas why this might not be working as expected?

This is the line that is failing:

$( ".carousel_item:nth-child(" + selected + ")" ).fadeOut(600);   

UPDATE: The issue seems to be with fadeOut on a element that does not have a width and height. When values are added to the width and height properties of div.carousel_item the fadeOut call works properly. Another method is to remove position: absolute from the descendant img causing the div to grow to the img dimensions.

回答1:

the issue seems to be with fadeOut on a element that does not have a width and height. when values are added to the width and height properties of div.carousel_item the fadeOut call works properly. another method is to remove position: absolute from the descendant img causing the div to grow to the img dimensions.

thanks for all of your help and suggestions!

回答2:

could it be that you just have to replace the current and the selected variables with each other in the jQuery-selector? when i understand it right you want to fadeout the current and fadein the selected, don't you?

回答3:

Changing the display setting in the HTML to <div id="txt2" class="carousel_item" style="display: none; "> should trigger the fadeIn/fadeOut correctly.

You may also need to change the jQuery to: $( ".carousel_item:nth-child(" + selected + ")" ).fadeOut(600).hide();

You're calling fadeIn/fadeOut on items that are both set to display: block. It needs alternate states in order to work.

UPDATE After downloading a local copy of your site, changing the showhide() function in your js to:

var inc = 1
function showhide(current) {
    if (inc == 1) current = 2;
    $( ".carousel_item:nth-child(" + selected + ")" ).fadeIn(600);
    $( ".carousel_item:nth-child(" + current + ")" ).fadeOut(600).hide();
    selected = current;
    inc++;
}

works in my testing. Hopefully, it works for you. I added the counter as your initial count seems to set both selected and current to 1.

来源：https://stackoverflow.com/questions/6274097/jquery-fadeout-is-not-changing-display-property