jquery toggle and fade in one function?

Question

I was wondering if toggle() and fadeIn() could be used in one function...

i got this to work, but it only fades in after the second click... not on first click of the toggle.

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

score 22 · Answer 1 · edited May 13 '13 at 07:48

22

Since jQuery 1.4.4 there is a new function for this called .fadeToggle()

Jquery fadeToggle

edited May 13 '13 at 07:48

Pete

57,112
28
117
166

answered Dec 24 '10 at 14:03

Konstantine Kalbazov

2,643
26
29

score 13 · Answer 2 · answered Apr 12 '10 at 22:41

13

You can use toggle() to alternate between a set of functions. So if you want an element to fadeIn and fadeOut every other click, have a toggle control 2 functions: the fadeIn and the fadeOut. Like this:

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

answered Apr 12 '10 at 22:41

pixeline

17,669
12
84
109

2

Note that this method signature has been removed from jQuery as of 1.9: http://jquery.com/upgrade-guide/1.9/#toggle-function-function-removed – Zhihao Dec 17 '14 at 22:42

score 4 · Answer 3 · answered Apr 12 '10 at 22:36

Your question confuses me a bit, because .toggle() is basically a show/hide toggle, but you have fadeIn. The closest guess I have is that you want a fade-toggle, in which case you can do this using animate():

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

Another option you may want is the slide up and down using .slideToggle() like this:

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

score 1 · Answer 4 · answered May 31 '11 at 20:43

Much better to write a custom function at the bottom of jquery.js:

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

Then you can call it like this:

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

score 0 · Answer 5 · answered Dec 31 '12 at 13:42

0

Very simple

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

answered Dec 31 '12 at 13:42

Fawad Ghafoor

6,039
7
41
53

He asked for fadeIn() specifically; slideToggle() is what it does already. – GFoley83 Mar 17 '13 at 00:09

score 0 · Answer 6 · answered Apr 13 '10 at 03:16

0

It also looks like someone wrote a plugin for this two years ago.

answered Apr 13 '10 at 03:16

Roman

19,581
6
68
84

jquery toggle and fade in one function?

6 Answers6