Jquery .toggle .animate

Question

I want to .toggle an .animation. Can you help me figure out why this jquery code does not work?

$(document).ready(function() {
$('.adiv').toggle(
   function(){
    $(this).animate({
        width: "150",
        height: "150",
    }, 1000);
    },
    function(){
    $(this).animate({
        width: "77", 
        height: "77",
    }, 1000);        
});
});

Thanks for your help!

You do realize the toggle is for show or hide. not to toggle something. — EasyBB, Jul 14 '14 at 13:37
Thanks @EasyBB was trying to follow the [method here](http://stackoverflow.com/questions/931113/jquery-toggle-animation). Any other ways to achieve this though? I appreciate your input — Nick B, Jul 14 '14 at 13:38
Yes you can do that, it's two different "toggles" per say for the show hide basically. I'll show you — EasyBB, Jul 14 '14 at 13:39
Also, code works fine... you need to select the Jquery library from the sidebar :) — imbondbaby, Jul 14 '14 at 13:40
That version of toggle was deprecated and removed from jQuery, the question you're looking at is five years old. — adeneo, Jul 14 '14 at 13:41

score 0 · Answer 1 · answered Jul 14 '14 at 13:44

Attention: Your code works great! The problem is very simple: in your jsfiddle, your forget to import jquery! Use the sidebar on the left and try again!

Btw here is my solution using mouseover and mouseout:

Demo

$(document).ready(function() {
$('.adiv').mouseover(function()
     {$(this).animate({
            width: "150",
            height: "150"
        }, 1000);
    }).mouseout(
    function(){
        $(this).animate({
            width: "77", 
            height: "77"
        }, 1000);        
});
});

score -1 · Accepted Answer · answered Jul 14 '14 at 13:43

http://jsbin.com/sirodego/1/edit

$('#toggle').toggle(function(){
    $(this).animate({
       width: "150",
       height: "150",
    }, 1000);
  },function(){
 $(this).animate({
     width: "77", 
     height: "77",
 }, 1000);        
});

This works fine, for the first condition which would be either to hide or show which would be the first animate, then do the opposite which would be the second animate.

If you need it to do more please let me know. My fiddle shows what is going on for you.

score -1 · Answer 3 · answered Jul 14 '14 at 13:48

-1

Try this code

$(document).ready(function() {
    $('.adiv').click( function(){
    if($(this).hasClass('active')){
        $(this).animate({
            width: "30",
            height: "30",
        }, 1000);
    $(this).removeClass('active');
    }  
    else{
        $(this).animate({
            width: "150", 
            height: "150",
        }, 1000);
    $(this).addClass('active');        
     };
  });      
});

Check This Demo

answered Jul 14 '14 at 13:48

amol

1,535
9
10

The OP's toggle works fine, I just don't believe he has told us very well on what he is trying to achieve. – EasyBB Jul 14 '14 at 13:48

Jquery .toggle .animate

3 Answers3