CODEWITHSUNDEEP
jquery
Nasir Zia
Nasir Zia

Reputation: 574

Can I make Toggle fadeIn Slow and fadeOut Fast?

I want toggle to work in such a way that when it fadein, it appears with slow speed and while fading out the speed is fast...

$('#target').fadeToggle("fast");

Any ideas?

Upvotes: 3

Views: 6267

Answers (4)

Piyush Sardana
Piyush Sardana

Reputation: 1758

You can do something like this

HTML

<button id="but" target="#content">Toggle content</button>

JS Code

function fadeToggle() {
    var target = $(this).attr('target');

    $(target).fadeOut(1000,function(){
      $(target).fadeIn(2000);  
    });
}

$('#but').click(fadeToggle);

Upvotes: 0

RRikesh
RRikesh

Reputation: 14381

$('#click-me').click(function(){
    if($('#target').is(':visible')){
       $('#target').fadeOut('fast');
    }
    else{
       $('#target').fadeIn('slow');
    }
});

That should do the work. I've used if($('#target').is(':visible')) to check if it is visible or hidden(toggled). Obviously it will fire when you click something with id="click-me"

Upvotes: 3

Sven van Zoelen
Sven van Zoelen

Reputation: 7229

If you want to toggle the fading of another element then you can use this function:

HTML:

<button id="but" target="#content">Toggle content</button>

JS:

function fadeToggle() {
    var target = $(this).attr('target');

    if(!$(target).hasClass('hide')) {
        $(target).fadeOut(100).addClass('hide');
    } else {
        $(target).fadeIn(2000).removeClass('hide');            
    }
}

$('#but').click(fadeToggle);

Example: JsFiddle

Upvotes: 1

Andy F
Andy F

Reputation: 1517

If you're trying to get the #target to fade in and out immediately at different speeds then you can use something like this (as suggested by others):

$("#target").click(function() {
    $(this).fadeOut('fast').fadeIn('slow');
});

This will call the fadeOut() method on the #target, and then the fadeIn() method once the first has finished, so your div will disappear and then reappear.

If instead you want to tie the toggle to another related item you could do this:

$("#clickme").toggle(function() {
    $("#target").fadeOut('fast');
}, function () {
    $("#target").fadeIn('slow');
});​

Where #clickme is an another element on the page. See this fiddle for a working example.

Upvotes: 0

Related Questions