Question

我有一个jQuery切换问题。以下代码工作正常。

// unhide the more when clicked
$(".more").click(function () {
    $(this).next(".moreDetails").toggle();
    // check state of the toggle
    if ($(this).next(".moreDetails").is(":visible")) {
        $(this).html('Show Less Details ... <img src="images/smallarrowup.png" />');
    } else {
        $(this).html('Show More Details ... <img src="images/smallarrowdown.png" />');
    }
})

当有人点击.more类DIV时，它会切换.moreDetails DIV，然后更改.MORE DIV中的HTML。它的工作原理是，当它切换.moreDetails DIV时，它必须设置在.moreDetails中的某个地方：可见，反之亦然，当它再次切换时，它必须设置在.moreDetails中的某处：隐藏。

这一切都很棒，但切换是显示/隐藏效果。我想要一个很好的淡化效果。但是一改变就

$(this).next(".moreDetails").toggle();

到

$(this).next(".moreDetails").fadeToggle();

它打破了。在每次切换时，似乎并没有.moreDetails DIV的可见性始终为真，即使您无法在DOM上看到它。

有什么想法吗？感谢

Answer 1

这是因为您在完成淡入/淡出效果之前检查:visibility。

试试这个：把if / else放在fadeToggle函数

中

// unhide the more when clicked
$(".more").click(function () {
    var $this = $(this);
    $(this).next(".moreDetails").fadeToggle( "fast", function() {
    if ($(this).is(":visible")) {
        $this.html('Show Less Details ... <img src="images/smallarrowup.png" />');
    } else {
        $this.html('Show More Details ... <img src="images/smallarrowdown.png" />');
    }
   });
});

您可以根据要求使用"slow" / "fast"。

有关fadeToggle的更多详情，请点击here。

jQuery fadeToggle - 未正确设置可见性

1 个答案: