Question

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

这一行：

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

工作正常，但是这个：

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

无效。

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

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

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

由于CSS left属性是position:*;属性的一部分，通过添加position属性来修复，因此jquery知道将左值增加的内容。

的 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

你想要达到什么目标？

您希望文本滑入（在屏幕的右侧）然后再滑动30px？

那是$("#headline1Txt").animate({ 'marginLeft': "+=30" }, 500);将会实现的目标。 'marginLeft'不只是left。

Answer 3

css的left属性仅适用于具有绝对位置的元素。要使动画工作，你必须将元素置于绝对位置。

jQuery文本动画幻灯片

3 个答案: