Question

鉴于following code：

<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_select div。但是，当我显示容器时，第二个不会被隐藏。

这是一个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（）'。然后还可以添加一个检查点，我们确定父项是否可见，如果它不可见，那么我们将其显示。

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

实例：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);
});

Answer 3

jQuery.fadeOut将元素从当前状态转换为您要采用的状态，在本例中为隐藏状态。如果该元素已被隐藏（与第二次出现一样），则jQuery不需要执行任何操作。你可以做的是专门将css显示设置为none：

$('.itsHidden .hotel_photo_select').css('display','none');

Answer 4

将show（）放在fadeout（）

之前

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

Answer 5

我遇到了同样的问题。我的解决方案是将元素隐藏为回调函数：

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

这样，如果元素被隐藏，将立即调用回调。

隐藏元素中的.fadeOut（） - 可能的bug？

5 个答案: