jQuery $ каждый fadeIn fadeOut

Question

Все работает отлично, за исключением одной вещи, мне бы хотелось, если у вас уже есть класс .show, он снова исчезнет, ​​когда вы нажмете на другой из разделов #c-.

http://jsfiddle.net/7KdR6/1/

$('[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

Одна из ваших проблем является то, что вы не остановить распространение, потому что 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

Answer 2

Вам нужно, чтобы скрыть элемент перед использованием 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 3

Попробуйте позвонить .hide() перед вызовом .fadeIn().

DEMO FIDDLE