jquery bascule et se décolore dans une fonction?

Question

Je me demandais si toggle() et fadeIn() pouvaient être utilisés dans une fonction ...

Je l'ai eu à travailler, mais il se fane seulement après le deuxième clic ... pas sur le premier clic de la basculer.

$(document).ready(function() { 

$('#business-blue').hide(); 

    $('a#biz-blue').click(function() { 
    $('#business-blue').toggle().fadeIn('slow'); 
    return false; 
    }); 

// hides the slickbox on clicking the noted link 

    $('a#biz-blue-hide').click(function() { 
    $('#business-blue').hide('fast'); 
    return false; 
    }); 


}); 



    <a href="#" id="biz-blue">Learn More</a> 
     <div id="business-blue" style="border:1px soild #00ff00; background:#c6c1b8; height:600px; width:600px; margin:0 auto; position:relative;"> 
      <p>stuff here</p> 
     </div> 

Answer 1

Votre question me confond un peu, parce que .toggle() est essentiellement un spectacle/bascule cacher, mais vous avez fadeIn. Le plus proche suppose que j'ai est que vous voulez un fondu bascule, dans ce cas, vous pouvez le faire en utilisant animate():

$('#business-blue').animate({opacity: 'toggle'}, 800); 

Une autre option vous pouvez est le haut de diapositives et vers le bas en utilisant .slideToggle() comme ceci:

$('#business-blue').slideToggle('slow'); 

Answer 2

Vous pouvez utiliser toggle() pour alterner entre un ensemble de fonctions. Donc, si vous voulez un élément à fadeIn et fadeOut tous les autres clics, ayez un contrôle à bascule 2 fonctions: le fadeIn et le fadeOut. Comme ceci:

$('a#biz-blue').toggle(function() { 
    $('#business-blue').fadeIn('slow'); 
    return false; 
    }, 
function() { 
    $('#business-blue').fadeOut('slow'); 
    return false; 
    }); 

Answer 3

Il semble aussi que quelqu'un a écrit il y a plugin for this deux ans.

Answer 4

Depuis jQuery 1.4.4 il y a une nouvelle fonction pour cette appelé .fadeToggle()

Jquery fadeToggle

Answer 5

Beaucoup mieux d'écrire une fonction personnalisée au bas de jquery.js:

jQuery.fn.fadeToggle = function(speed, easing, callback) { 
    return this.animate({opacity: 'toggle'}, speed, easing, callback); 
}; 

Ensuite, vous pouvez l'appeler comme ceci:

$('#hiddenElement').fadeToggle('fast'); 

Answer 6

Ve ry simple,

$("a#biz-blue").live('click',function(){ 
    $('#business-blue').slideToggle(200); 
});