jQuery: Toggle & Fade In?

Question

У меня есть следующий переключатель, который отлично работает, бог знает, как я получил его на работу; Не понимаю все это.

jQuery(function() { 
    jQuery('.toggle1').click(function() { 
     jQuery('.toggle-box').slideToggle('fast'); 
     return false; 
    }); 
});​ 

Возможно ли то, что в .toggle-box исчезать после его щелкали окно открытым?

Я попробовал, добавив ..

jQuery(".toggle-box").fadeIn(2000); 

Но не везло.

Возможно ли вообще?

Большое спасибо за помощь.

Answer 1

Там в несколько лучших практических вещей, которые могут помочь вам здесь, но в общем, просто иметь все, что контейнер (я буду называть его .toggle-boxInner) FadeIn() как так

также, есть некоторые очистки, что может случиться с вами, вы код, только некоторые короткие сокращения

$(function(){ // when ready... 

    // here's your onClick listener for the toggle1 class element(s) 
    $('.toggle1').click(function(){ 

     // slideToggle the toggle-box 
     $('.toggle-box').slideToggle('fast', function(){ 

      // this is called when the toggle-box slideToggle is complete 
      $('.toggle-box .toggle-boxInner').fadeToggle('fast'); 
     }); 
     return false; // i don't think you should need this unless you're using 
         // a <a/> or <input type='submit' /> 
         // as the .toggle1 element 
    }); 
}); 

вы можете захотеть .fadeToggle внутренний контейнер так, что она исчезнет, ​​когда тумблер окно скользит назад. также, не стесняйтесь изменять .fadeIn («медленный») на «быстрый».

надеюсь, что это поможет!

редактировать: сделал эти предложенные изменения: P

Answer 2

$(function() { 
    $('.toggle-box').hide().contents().hide(); 
    $('.toggle1').on('click', function(e) { 
     e.preventDefault(); 
     $('.toggle-box').slideToggle('fast', function(e) { 
      if ($(this).is(':visible')) { 
       $(this).contents().fadeIn(2000); 
      }else{ 
       $(this).contents().hide(); 
      } 
     }); 
    }); 
}); 

FIDDLE