[SOLVED] jQuery: Toggling an animation

[alex3]

I have a problem in that I'm trying to get an animation that slides and panel out horizontally, and then slides it back, controlled by clicking some cover art, this should be toggled.

 

The problem is that when the picture is clicked, jQuery does both the normal toggle animation (which I don't want) and plays my custom animation.

 

You can see the problem by clicking the album art; when in the text is hidden and the art is clicked, it toggles the text in, then animates it away. Another click (the text should be showing..) animates the text in, then animates it away.  Here's my code:

 

$(document).ready(function() {

$("#cdinfo").hide();

$('#cdcase').click(function() {
	$('#cdinfo').toggle(function() {
		$('#cdinfo').animate({ 
	        width: "250",
	      }, 1500 );
	    $('#cdinfo').animate({ 
	        width: "0",
	      }, 1500 );
	return false;
	});
});
});

 

This is my first bit of jQuery myself, hoping to learn a lot.

[KevinM1]

Hmm...

 

Well, the toggle event is essentially a specialized click event (http://docs.jquery.com/Events/toggle#fnfn2fn3.2Cfn4.2C...).  So, why not remove the outer-most click event?

 

$(document).ready(function()
{
   $("cdinfo").hide();

   $('#cdcase').toggle(
   function()
   {
      $('#cdinfo').animate({width: "250"}, 1500);
   },
   function()
   {
      $('#cdinfo').animate({width: "0"}, 1500);
   });
});

[alex3]

Ahhaaa. I got you, that did the trick.

 

Thanks very much for that, I even managed to add my own little bits. jQuery is very nice indeed!