Question

一切正常，除了一件事，我喜欢它，所以当你已经看到.show类时，当你点击另一个#c- div时，它会再次淡化。

$('[id^="c-"]').each(function(i){
    $this = $(this);
    $(this).text(i);
    $(this).on('click',function(){
        $('.show').fadeIn().text(i);
        event.stopPropagation();
    });
})
$(document).on('click', function(){
     $('.show').fadeOut();
});

Answer 1

您需要在可见元素上使用fadeIn之前隐藏元素

$('[id^="c-"]').each(function (i) {
    var $this = $(this);
    $this.text(i);
    $this.on('click', function () {
        $('.show').hide().fadeIn().text(i);
        event.stopPropagation();
    });
})

演示：Fiddle

Answer 2

在致电.fadeIn()之前尝试拨打.hide()。

<强> DEMO FIDDLE

Answer 3

您的一个问题是您没有停止传播，因为未定义event。您必须使用click处理程序的参数。 编辑：实际上，event看起来会自动传递 - 我之前没有意识到这一点。但是，我仍然认为最好将事件对象作为参数，如果你打算使用它 - jQuery在他们的例子中做到这一点，它使它更明显。

我还注意到你正在缓存this，但之后没有使用那个缓存的var。这意味着每次编写$(this)时，都必须重写该jquery对象。

然后你可以有一个fadeOut并使用fadeIn作为fadeOut的回调。这样，如果已经显示.show元素，它将首先淡出。我会这样写：

$('[id^="c-"]').each(function (i) {
    $this = $(this);
    $this.text(i);
    $this.on('click', function (event) {
        event.stopPropagation();
        $show = $(".show");
        $show.fadeOut(function () {
            $show.fadeIn().text(i);
        });
    });
})

Fiddle

jQuery $ fadeIn fadeOut

3 个答案: