Javascript jQuery文本动画滑入

我正在尝试在动画中使用jQuery幻灯片，它似乎工作得很好，但我的第二个动画不工作。谁能告诉我我做错了什么

这一行：

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

工作正常，但这个：

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

它不起作用

HTML

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

<div id="mainContainer">

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

</div>

CSS

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

#headlineText {
     margin: 60px 80px;
}

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

---

你想达到什么目标

你想让文本滑入（标题正好穿过屏幕），然后再滑30像素

这就是

$（“#headline1text”）。动画（{'marginLeft'：“+=30”}，500）将实现。
'marginLeft'
不仅仅是
左侧

left CSS属性指定定位对象位置的一部分
元素。
对于绝对定位的图元（具有位置：绝对或位置：固定的图元），它指定左边距之间的距离
元素的边缘及其包含块的左边缘


因为CSS
left
属性是
位置：*的一部分属性的，通过添加position属性进行修复，这样jquery就知道如何增加左值


CSS

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

#headlineText {
     margin: 60px 80px;
}

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

HTML

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

<div id="mainContainer">

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

</div>

css的left属性仅适用于具有绝对位置的元素。要使动画工作，您必须将元素置于绝对位置。
您还可以嵌套后续动画，例如：