gpt4 book ai didi

javascript - 我们可以将 CSS 动画设置为在前一个子元素动画之后发生吗?

转载 作者:太空宇宙 更新时间:2023-11-04 13:26:08 24 4
gpt4 key购买 nike

假设我在同一个 ul 元素下有十个 li 元素。我想做的,说一个幻灯片效果。目前,我们可以使用 css 动画轻松地做到这一点,但如果我希望动画按顺序发生,似乎没有明显的方法来做到这一点。

我也对单独的 javascript 混合解决方案持开放态度,因为它相对较快(对于智能手机)。谢谢!

最佳答案

我建议使用递归函数。为此,我将使用 jQuery。在此代码中,动画只是向左侧添加边距。您可以根据自己的喜好编辑动画

    <html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>

<ul>
<li id="li-1">List Item 1</li>
<li id="li-2">List Item 2</li>
<li id="li-3">List Item 3</li>
<li id="li-4">List Item 4</li>
<li id="li-5">List Item 5</li>
<li id="li-6">List Item 6</li>
<li id="li-7">List Item 7</li>
<li id="li-8">List Item 8</li>
<li id="li-9">List Item 9</li>
<li id="li-10">List Item 10</li>
</ul>


<script type="text/javascript">

function slideLi(curLi) {
console.log(curLi);

if($("#li-"+curLi).length) {

$("#li-"+curLi).animate({
marginLeft: "+=50px"
}, 200, "linear", function() {
$(this).animate({
marginLeft: "-=50px"
}, 200, "linear", function() {
slideLi(curLi-1);
});
});
return;
} else return;
}

$("ul").mouseenter(function() {
slideLi($("ul li").length);
});

</script>
</body>
</html>

关于javascript - 我们可以将 CSS 动画设置为在前一个子元素动画之后发生吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23707602/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com