Jquery: nouveau FadeToggle, puis-je exécuter du code sur la 2ème action de la bascule?

Question

alors quand je clique sur #mybutton il va s'estomper en .mybox. est-il possible de prendre mon code ci-dessous, et ajouter quelque chose comme .animate({'width':'toggle'}) ou ajouter un .delay(2000) avant la première fois qu'il est basculé, puis ne pas activer le délai lorsque la bascule est activée la deuxième fois? comment ferais-je cela? moyen le plus simple/le plus simple?

voici mon code pour travailler avec:

$('#mybutton').click(function(){ 
    $('.mybox').fadeToggle(500) 
}) 

Answer 1

En utilisant one() pour lier un gestionnaire d'événement ponctuel, contraignant alors le gestionnaire d'événements permanent « réel » sera fonctionnerait ici:

var box = $('#box'); 

$('a').one('click', function(){ 
    box.delay(2000).fadeToggle(); 
    $(this).click(function(){ 
     box.fadeToggle(); 
     return false; 
    }); 
    return false; 
}); 

Voir cette simple démo ici: http://jsfiddle.net/yijiang/2m3bb/

Answer 2

Voilà comment je le ferais, en utilisant setTimeout():

var firstClick = true; 

$('#mybutton').click(function(){ 
    if (firstClick) { 
     setTimeout(function() { 
      $('.mybox').fadeToggle(500); 
      firstClick = false; // #mybutton has been clicked once, we no longer want to wait before toggling on subsequent clicks of #mybutton 
     }); 
    } else { 
     $('.mybox').fadeToggle(500); 
    }  
}) 

Answer 3

Vous pouvez utiliser tout simplement toggle() au lieu de fadeToggle() pour obtenir un peu plus de contrôle .

$('#mybutton').click(function(){ 
var firstTime = true; 
$('.mybox').toggle(
    function() { 
     $(this).fadeIn(500); 
    }, 
    function() { 
     if (firstTime) 
     { $(this).delay(2000); } 
     $(this).animate({'width':'toggle'}).fadeOut(500); 
    } 
); 
})