jQuery文本动画幻灯片

jQuery text animation slide-in

本文关键字：幻灯片 动画 文本 jQuery      更新时间：2023-09-26

我正在尝试在动画中使用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>

JS

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

CSS

#headlineText {
     margin: 60px 80px;
}

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

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

由于CSS left属性是position:*;属性的一部分，请通过添加position属性进行修复，这样jquery就知道将左值增加到什么。

正在运行

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);
});

您想要实现什么？

你想让文本滑入(标题正好在屏幕上(，然后再滑30像素？

这就是$("#headline1Txt").animate({ 'marginLeft': "+=30" }, 500);将要实现的目标。CCD_ 4而不仅仅是CCD_。

css的left属性只适用于具有绝对位置的元素。为了使你的动画工作，你必须把你的元素在绝对的位置。
相关文章：