toggleClass animation not working? or need help toggling animation

Question

I am working with this code:

 $('#products h2').click(
        function() {
           $('.well').toggleClass('margin-left260', 100000);
            return false;
        }
    );

What I want to do is slide a div over 260 using a left margin, and then have it slide back on click to 0. I don't understand why .toggleClass is not animating for me.

I also did well earlier using .animate(margin-left,'260px); but for the life of me could figure out how to use the toggle to have it return to a margin of 0. What am I missing here?

Answer 1

I have added a jsfiddle example here - http://jsfiddle.net/BaXyR/

basically

$('.clickme').click(function(){
if($('#moveme').hasClass('marginleft260')){
      $('#moveme').animate({
        marginLeft: "-=260px",
      }, 5000, function() {
        $(this).removeClass('marginleft260');
      });    
}else{
      $('#moveme').animate({
        marginLeft: "+=260px",
      }, 5000, function() {
        $(this).addClass('marginleft260');
      });    
}
});

Answer 2

toggleClass can be used to add / remove a class / classes on a toggle. is margin-left260 a class in your css i.e.

.margin-left260 {
    margin-left:260px;
}

also looking at your code, i think you are not implementing toggleClass correctly. see : http://api.jquery.com/toggleClass/

are you trying to animate the movement?

I think the correct code would be use the animate function - see : http://api.jquery.com/animate/