jQuery how to animate my code?

Question

Hey, I know a little bit of jQuery now, but I'm still a bit confused with animations (especially when I have to add them to working script).

I have for example:

  if (i = 1) {            
                i = i +1
                $("#div p").css("left", "-" + width * i + "px");  
        }

How to animate() margin adding? I'm trying and trying and trying...

     if (i = 1) {            
                i = i +1
                $("#div p").animate().css.("left", "-" + width * i + "px");  
        }

  if (i = 1) {            
                i = i +1
                $("#div p").css(.animate("left", "-" + width * i + "px"));  
        }

etc.

Thanks!

Answer 1

In the easiest way imaginable:

$('#book').animate({
    left: "-" + width * i + "px"
}, 5000);

Also, when in doubt, don't forget to take a look at the official documentation: http://api.jquery.com/animate/

Answer 2

Do you actually want the margin to .animate()?

$("#div p").animate({marginLeft: -(width * i) }); 

Or the left position?

$("#div p").animate({left: -(width * i) }); 

(No need for the "px", since that is the default for both of these. You don't need the quotes around the "-" either. You can send an integer.)

Keep in mind that if you're animating the left position, you'll need to have your css position set to relative or absolute.

---

EDIT:

Also note that in your if() statements, if you are trying to do a comparison, you need to use == or ===, as in:

if (i === 1) {...