Jquery：页面加载淡入并移动

Posted 2023-05-08

【中文标题】Jquery：页面加载淡入并移动

【英文标题】：Jquery: on page load fade in and move

【发布时间】：2013-02-13 21:28:07

【问题描述】：

我是 Jquery 的新手，我试图让一个 div 淡入，然后在页面加载时向左移动。 我似乎无法弄清楚如何链接它。我可以让它淡入淡出，但之后就不动了。这是我所拥有的。

<script type="text/javascript">

$(document).ready(function() 
    $('#PageTitle').fadeIn(5000)
);

</script>

我试过了

$(document).ready(function() 
    $('#PageTitle').fadeIn(2000);
    $('#PageTitle').animate("left" : "300px",, 4000);
);

和其他几个变体，但似乎无法得到它。提前致谢。

【问题讨论】：

页面标题是否绝对定位？介意分享你的 html 吗？

【参考方案1】：

如果PageTitle 是绝对定位的，那么：

$('#PageTitle').fadeIn(5000).animate("left":"300px",4000);

will work just fine

【讨论】：

啊……这就是问题所在。我没有将 div 标记为 Absolute..（在额头上打自己）。谢谢大佬！

【参考方案2】：

你的问题有点含糊，但我会这样链接它

$(document).ready(function() 
    $('#PageTitle').fadeIn(2000,function()
       $(this).animate("left" : "300px", 4000);
     );    
);

这里有一个例子http://jsfiddle.net/domjgreen/Hx6rX/

【参考方案3】：

在 jQuery 中的每个动画上都有一个回调函数。 所以你应该试试：

$(document).ready(function() 
    $('#PageTitle').fadeIn(2000, function()
        $('#PageTitle').animate("left" : "300px",, 4000);
    );
);

查看http://api.jquery.com/fadeIn/

【讨论】：

这也有效。如上所述，主要问题是我没有将 div 设置为绝对值。谢谢！

【参考方案4】：

您可以使用这个aos 包。首先，您必须删除不需要的 CSS 以便在您自己的网页中使用。