gpt4 book ai didi

javascript - 附加一个具有滑动效果的div

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

我正在尝试使用 css 附加一个具有幻灯片效果的新 div。我找到了一种使用关键帧的方法。

我尽量避免使用关键帧,因为我还不太了解它,并希望通过更简单的方式实现这一点。

此外,我想将我的新 div 放在其他 div 旁边,而不是按钮,但我也遇到了问题。

我该怎么做?

$('div:first-child').click(function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});

$('button').click(function() {
$('body').append('<div class="slide">7</div>');
});
div {
display: inline-block;
}
button {
position: relative;
}
.active {
font-size: 25px;
}
div:nth-child(2):active {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-webkit-transition: -webkit-transform 2s;
transform: rotate(360deg);
transition: transform 2s;
}
.slide {
position: absolute;
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
}
to {
margin-left: 0%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</body>
<button>button</button>

最佳答案

我认为您需要的是 jQuery UI。除其他外,还有一些很棒的幻灯片效果。

http://api.jqueryui.com/effect/

关于javascript - 附加一个具有滑动效果的div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40884864/

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