Geek Answers Handbook

JQuery switch slide animation

I created a custom slide switch function. It works fine as expected, but not slipping in the first click. if you click on the map arrow, you will see that the switching class will apply to it, but the map will not slide. but if you click twice, it will slide.

I am new to jquery and I also searched a lot but found nothing. 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/

+4
source share
5 answers

The problem with your current solution is that the classes get confused somewhere in toggleClass() , and also the fact that you have .map_btn click handler for .map_btn in another click handler for the same element.

The flow becomes a little spoiled, therefore.

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 .toggle() , so you do not need to write two different methods.

Link to the script - http://jsfiddle.net/h2fh6/20/

You can learn more about switching here.

0
source

If you don't need a 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 called this function toggleClick .

+3
source

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 }); });​
+1
source

The following 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 }); });

0
source

Here I use the caching of the selected selectors (and the obvious closing area, so I put $(window).load(); ) there, you will have better overall performance.

You need to cache if you are animating. You must. Do not animate over and over when re-selecting a jQuery object call, such as $('.map_wrapper').stop().animate() . It is inefficient and should be executed only when necessary, as when changing the DOM and it is necessary to find the current state.

My approach simply switches the effect variable with the new settings if there is a .toggle on the button. Simple, reliable. There seems to be a slight lag since the iframe loading from Google Maps. This may be unavoidable in 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/

0
source

More articles:


All Articles