jQuery toggle animation

Question

I have this jQuery:

$(document).ready(function()
{
   $("#panel").hide();

   $('.login').toggle(
   function()
   {
      $('#panel').animate({
      height: "150", 
      padding:"20px 0",
      backgroundColor:'#000000',
      opacity:.8
}, 500);
   },
   function()
   {
      $('#panel').animate({
      height: "0", 
      padding:"0px 0",
      opacity:.2
      }, 500);
   });
});

This is working fine, but I need to extend the functionality a little. I want to also similarly manipulate another div's properties in sync with the #panel div. I tried adding two more functions relating to the secondary div, but I just got a 4-phase toggle...haha! Forgive my ignorance!

Thanks guys!

Why can't you add the code to manipulate this second DIV inside the first two functions? Am I missing something? — Paolo Bergantino, May 31 '09 at 02:30

score 54 · Accepted Answer · edited Jul 16 '13 at 07:52

54

$('.login').toggle(
    function(){
        $('#panel').animate({
            height: "150", 
            padding:"20px 0",
            backgroundColor:'#000000',
            opacity:.8
        }, 500);
        $('#otherdiv').animate({
            //otherdiv properties here
        }, 500);
    },
    function(){
        $('#panel').animate({
            height: "0", 
            padding:"0px 0",
            opacity:.2
        }, 500);     
        $('#otherdiv').animate({
            //otherdiv properties here
        }, 500);
});

edited Jul 16 '13 at 07:52

Aldi Unanto

3,626
1
22
30

answered May 31 '09 at 02:32

Vincent Ramdhanie

102,349
23
137
192

5

This function is deprecated as of JQuery 1.8 and removed in JQuery 1.9. http://api.jquery.com/toggle-event/#entry-longdesc – Xtrinity Dec 31 '15 at 09:22

score 6 · Answer 2 · edited Sep 08 '17 at 12:38

6

I dont think adding dual functions inside the toggle function works for a registered click event (Unless I'm missing something)

For example:

$('.btnName').click(function() {
 top.$('#panel').toggle(function() {
   $(this).animate({ 
     // style change
   }, 500);
   },
   function() {
   $(this).animate({ 
     // style change back
   }, 500);
 });

edited Sep 08 '17 at 12:38

Fabrizio

7,603
6
44
104

answered Feb 17 '12 at 19:28

John Darling

99
1
4

1

so, what are you trying to say ? i dont think it is helpful to give code that dosent work and say "Oh, it dosent work". post a real solution. – Rafael Herscovici Feb 14 '13 at 10:26
I think it is helpful to give code that dosent work and say "Oh, it dosent work". – Alireza Dec 21 '13 at 09:17
1

This function is deprecated as of JQuery 1.8 and removed in JQuery 1.9. http://api.jquery.com/toggle-event/#entry-longdesc – Xtrinity Dec 31 '15 at 09:23

score 0 · Answer 3 · answered Jun 29 '21 at 08:23

Use toggle() or slideToggle from jquery:

Toggle

  $( "#clickme" ).click(function() {
      $( "#book" ).slideToggle( "slow", function() {
        // Animation complete.
      });
    });


 <div id="clickme">
      Click here
    </div>
    <img id="book" src="book.png" alt="" width="100" height="123">

score -8 · Answer 4 · edited Jul 22 '12 at 06:31

-8

onmouseover="$('.play-detail').stop().animate({'height': '84px'},'300');" 

onmouseout="$('.play-detail').stop().animate({'height': '44px'},'300');"

Just put two stops -- one onmouseover and one onmouseout.

edited Jul 22 '12 at 06:31

Conner

30,144
8
52
73

answered Apr 26 '12 at 04:23

will

33

2

Using inline JavaScript is not a good pattern. If you are already using jQuery use event handlers instead. – akluth Oct 26 '12 at 08:11

jQuery toggle animation

4 Answers4

Linked

Related