jQuery文本动画幻灯片

Question

I am trying to use jQuery slide-in animation and it seems to work fine, but my the second animation doesn't work. Can anyone tell me what I am doing wrong?

This line:

$('#headline1Txt').animate({'marginLeft': "100px"}, 1000);

is working fine, but this one:

$("#headline1Txt").animate({left: "+=30"}, 500);

is not working.

My Code

HTML

<div id="mainContainer">
    <div id="headlineText">
        <p id="headline1Txt" >Striped Bag</p>
    </div>
</div>

JS

$(document).ready(function () {
    $('#headline1Txt').animate({'marginLeft': "100px"}, 1000);
    $("#headline1Txt").animate({left: "+=30"}, 500);
});

CSS

#headlineText {
     margin: 60px 80px;
}

Answer 1

The left CSS property specifies part of the position of positioned elements. For absolutely positioned elements (those with position: absolute or position: fixed), it specifies the distance between the left margin edge of the element and the left edge of its containing block.

https://developer.mozilla.org/en-US/docs/Web/CSS/left

As the CSS left property is part of position:*; property's, fix by adding the position property, so jquery knows what to increment a left value to.

In Action

CSS

#headlineText
{
    margin:60px 80px;
}
#headline1Txt
{
    position:relative;
}

HTML

<div id="mainContainer">

    <div id="headlineText">
        <p id="headline1Txt">Striped Bag</p>
    </div>

</div>

jQuery

$(document).ready(function () {

   $('#headline1Txt').
       animate({ 'marginLeft': "100px" }, 1000).
       animate({ left:"+=30" }, 5000);

});

Answer 2

What are you trying to achieve?

You want the text to slide in (heading right across the screen) then slide another 30px?

Thats what $("#headline1Txt").animate({ 'marginLeft': "+=30" }, 500); will achieve. 'marginLeft' not just left .

Answer 3

The left property of css only works with elements with absolute position. To make your animation work you have to put you element at absolute position.