explaination of Animation in jquery

Question

Why does it animate the element from begin of left not from it's position to 100 pixel left

$("selector").animate({left: "+100px"});

score 1 · Accepted Answer · answered Aug 07 '15 at 21:55

1

According to the documentation for jQuery's animate():

"If a value is supplied with a leading += or -= sequence of characters, then the target value is computed by adding or subtracting the given number from the current value of the property."

So, use this syntax:

$("div").animate({
  left: "+=100px"
});

div {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #CCC;
  left: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

answered Aug 07 '15 at 21:55

showdev

28,454
37
55
73

thanks bro .but can i scale it from its size to 10 while it animating – amgad atef Aug 07 '15 at 22:44
Which CSS property are you trying to animate? If you like, you can [edit your question](http://stackoverflow.com/posts/31887093/edit) to add a new example. – showdev Aug 07 '15 at 22:52
according to original questing (animating to left 100px from its position ) – amgad atef Aug 07 '15 at 22:57
Sorry, I don't understand. My demo animates 100px left from the original position. What do you mean by "scale it from its size to 10"? – showdev Aug 07 '15 at 22:58
i meaning decrease size of image form its original size to 10 .i can do this by scale transformation in css but i do not know to to do this the moving of image from it`s position to 100 pixel left. – amgad atef Aug 07 '15 at 23:03
So you are trying to animate both the `left` and a CSS `transform`? You can't *directly* animate a non-numeric property, but you might find a solution here: [Animate element transform rotate](http://stackoverflow.com/questions/5462275/animate-element-transform-rotate) – showdev Aug 07 '15 at 23:07

explaination of Animation in jquery

1 Answers1