CODEWITHSUNDEEP
jquerytoggleslide
Umair Razzaq
Umair Razzaq

Reputation: 313

jQuery toggle slide animation

I've created custom toggle slide animation. Its working fine as expected but its not sliding on first click. if you click on map arrow then you will see the toggle class will apply to it but map will not slide. but if you click twice more then it will slide.

I'm quite new to jquery and I've also searched alot on it but nothing find any solution. Here is the code;

$('.map_btn').click(function() {
    $('.map_btn').toggleClass('toggle');

    $('.map_btn').on('click', function() {
        $('.map_wrapper').stop().animate({
            opacity: 1,
            height: 420
        });
    });
    $('.map_btn.toggle').on('click', function() {
        $('.map_wrapper').stop().animate({
            opacity: 0,
            height: 0
        });
    });
});

http://jsfiddle.net/h2fh6/

Upvotes: 4

Views: 5508

Answers (5)

painotpi
painotpi

Reputation: 6996

The problem with your current solution is that the classes are getting messed up somewhere in the toggleClass() and also the fact that you've nested a click handler for .map_btn within another click handler for the same element.

The flow gets a bit messed up, hence.

You can try this, 

$('.map_btn').toggle(function() {
    $('.map_btn').toggleClass('toggle');
    $('.map_wrapper').stop().animate({
        opacity: 1,
        height: 420
    });
}, function() {
    $('.map_btn').toggleClass('toggle');
    $('.map_wrapper').stop().animate({
        opacity: 0,
        height: 0
    });
});​

Use only the .toggle() so you don't have to write 2 separate methods.

Fiddle link - http://jsfiddle.net/h2fh6/20/

You can read more about toggle here

Upvotes: 0

Jared Farrish
Jared Farrish

Reputation: 49238

Here's my take on it, with caching of the selectors that get recalled (and the obvious closure scope, which is why I put the $(window).load(); in there), you will have better overall performance.

You have to cache if you're animating. You have to. Do not animate over and over on a reselecting jQuery object call like $('.map_wrapper').stop().animate(). It's inefficient, and should only be done when necessary, as when the DOM has been modified and needs to find current state.

My approach just toggles the effect variable with new settings if the .toggle is found on the button. Simple, reliable. There does seem to be a slight lag at times as the iframe loads from Google Maps. That may be unavoidable in the jsFiddle environment.

$(window).load(function(){
    var $mapbtn = $('.map_btn'),
        $wrapper = $('.map_wrapper');

    $mapbtn.click(function() {
        var $this = $(this),
            effect = { opacity: 0, height: 0 };

        $this.toggleClass('toggle');

        if ($this.is('.toggle')) {
            effect.opacity = 1;
            effect.height = 420;
        }

        $wrapper.stop().animate(effect);
    });
});

http://jsfiddle.net/userdude/h2fh6/21/

Upvotes: 0

Eswar Rajesh Pinapala
Eswar Rajesh Pinapala

Reputation: 4911

The below code should work with your icon animations!

http://jsfiddle.net/epinapala/h2fh6/19/

$('.map_btn').toggle(function() {
    $('.map_btn').toggleClass('toggle');
    $('.map_wrapper').stop().animate({
        opacity: 1,
        height: 420
    });
},function() {
    $('.map_btn').toggleClass('toggle');
    $('.map_wrapper').stop().animate({
        opacity: 0,
        height: 0
    });
});

​

Upvotes: 0

chaosguru
chaosguru

Reputation: 1983

You can try this

$('.map_btn').toggle(function() {
 $('.map_btn').toggleClass('toggle');
$('.map_wrapper').stop().animate({
    opacity: 1,
    height: 420
});
},function() {
 $('.map_btn').toggleClass('toggle');
$('.map_wrapper').stop().animate({
    opacity: 0,
    height: 0
});
});​

Upvotes: 1

iambriansreed
iambriansreed

Reputation: 22261

Unless you needed the class for something else just use .toggle().

$('.map_btn').toggle(function() {
    $('.map_wrapper').stop().animate({
        opacity: 1,
        height: 420
    });
},function() {
    $('.map_wrapper').stop().animate({
        opacity: 0,
        height: 0
    });
});

I really think they should have named this function toggleClick.

Upvotes: 3

Related Questions