隐藏元素中的.fadeOut() - 可能的bug？

Question

给出以下代码:

<div class='hotel_photo_select'>
    Hello
</div>

<div class='itsHidden' style='display:none'>
    <div class='hotel_photo_select'>
        Hello
    </div>
</div>

和:

$('.hotel_photo_select').fadeOut(300);
$('.itsHidden').show();

我希望两个.hotel_photo_selectdiv都被隐藏起来.但是,当我显示容器时,第二个不会被隐藏.

这是一个jQuery错误吗？在fadeOut()之后,每个元素都应该被隐藏.

我认为唯一的解决方案是:

$('.hotel_photo_select').fadeOut(300, function () {
    $(this).hide();
});
$('.itsHidden').show();

我发现它不够优雅.

Answer 1

正如"Boo"已经提到的那样,因为第二个"hello"div的当前状态是"隐藏",jQuery.fadeOut()将不会对其应用任何动画.

而不是说"为我淡出",你需要说"将不透明度设置为0".在这种情况下,jQuery不关心你的元素是否可见.它会做它的工作:

$('.hotel_photo_select').animate({opacity:0}, 3000);

在这里看到:http://jsfiddle.net/QMSzg/20/

Answer 2

从技术上讲，对于这种类型的方法，您需要使用“.each()”。然后还让我们添加一个检查点，在其中我们确定父级是否可见，如果不可见，则将其设为可见。

但是，使父级可见可能会对您的布局产生负面影响，是的。但没有更好的方法来做到这一点，因此您应该避免此类情况。

实例： http: //jsfiddle.net/QMSzg/21/

$('.hotel_photo_select').each(function () {
    var this_parent = $(this).parent('div');
    if (this_parent.is(':hidden')) {
        this_parent.show();
    }
    $(this).fadeOut(500);
});