jquery - 向左过渡幻灯片
问题描述
我正在创建一个幻灯片,当您在幻灯片之间单击时,第一个项目会变大。这工作正常。但是,当您单击幻灯片时,我无法在左侧添加一个很好的平滑过渡。我究竟做错了什么?我尝试使用 jquery animate 和 css 转换。没发生什么事。
https://codepen.io/camwes89/pen/mdJQLra
var slider = $(".grow-carousel"),
item_width = slider.parent().outerWidth();
// Adjust the slider when/if the window gets resized
$(window).on("resize", adjust);
adjust();
if (slider.children("li").length > 1) {
// Add previous/next buttons
slider
.parent()
.append(
'<a href="#" id="btn-prev"><i class="fa fa-angle-left"></i><span>Previous</span></a><a href="#" id="btn-next"><i class="fa fa-angle-right"></i><span>Next</span></a>'
);
// Handle clicks on the next button
slider.parent().on("click", "a#btn-prev", function(e) {
e.preventDefault();
$(".grow-carousel li").removeClass("active");
slider.children("li:last").prependTo(slider);
slider.css("left", -item_width);
slider.animate({
left: 0
},
300,
"swing"
);
slider.find("li").first().addClass("active");
});
// Handle clicks on the previous button
slider.parent().on("click", "a#btn-next", function(e) {
e.preventDefault();
$(".grow-carousel li").removeClass("active");
slider.animate({
left: -item_width
},
300,
"swing",
function() {
slider.children("li:first").appendTo(slider);
slider.css("left", 0);
slider.find("li").first().addClass("active");
}
);
});
}
// Helpers
function adjust() {
item_width = slider.parent().outerWidth();
slider
.children("li")
.width(item_width)
.parent()
.width(item_width * slider.children("li").length);
}
.container {
width: 600px;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 100%;
height: 400x;
}
ul {
padding: 0;
margin: 0;
list-style: none;
transition: all 3s ease;
overflow: hidden;
position: relative;
top: 0;
left: 0;
margin: 0;
padding: 0;
height: 100%;
transition: all 0.3s ease-in;
li {
position: relative;
font-size: 80px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
text-align: center;
margin: 10px;
padding: 20px;
background: #333;
height: 260px;
width: 160px !important;
transition: all 0.3s ease-in;
transition-delay: 250ms;
overflow: hidden;
display: inline;
float: left;
img {
height: 100%;
width: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
&.active {
height: 300px;
}
}
}
#btn-next {
position: relative;
top: -29px;
margin-left: 101px;
background: #ccc;
padding: 2px 3px;
}
#btn-prev {
position: relative;
top: -29px;
margin-left: 10px;
background: #ccc;
padding: 2px 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<ul class="grow-carousel">
<li>
<div>
<img src="https://images.unsplash.com/photo-1585194329143-ad92c5b1ede0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
</div>
</li>
<li>
<div>
<img src="https://images.unsplash.com/photo-1585001994793-7a4b117bcdcb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
</div>
</li>
<li>
<div><img src="https://images.unsplash.com/photo-1585225465920-594394872d48?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" /></div>
</li>
</ul>
</div>
解决方案
据我了解,单击“上一个”或“下一个”按钮时,您的动画“无法正常工作”。渲染效果是动画中的跳跃……对吧?
你的主要问题是 CSS 动画和 JQUERY 动画之间的冲突
似乎您想通过 JS(使用 jQuery)来统治一切,因为您需要在动画之前或之后移动幻灯片的最后一个或第一个图像。动画的使用属性是left
,它是动画的或简单设置的。
到目前为止,一切都很好......但是,你有副作用,因为这个left
属性也是用 CSS 动画的(3 秒持续时间)。每次你left
用 JS 触摸属性时,它会持续 3 秒,所以你所有的 JS 概念/动画都毁了。
你只需要
ul
评论元素的 CSS 动画- 例如,将动画持续时间从 100 毫秒增加到 2 秒
请记住,除非您真的知道自己在做什么,否则不应在相同的属性上混合使用 CSS 动画和 JQUERY 动画
这两个更新对我有用 https://jsfiddle.net/piiantom/a79b2gn4/11/
PS:注意您的评论与上一个/下一个按钮上应用的专用代码相比是相反的
推荐阅读
- vue.js - 如何在 Table Bootstrap Vue 中为行禁用 v-slot
- redis - 使用 spring-data-redis 配置的 Redis 连接池但无法正常工作
- python - 如何使用 Python 在 Excel 上打印每页中的小计和页面末尾的总计
- javascript - 是否可以通过单击网页的按钮访问浏览器的共享功能?
- python - 尝试对两个现有日期列使用条件逻辑在 DataFrame 中创建新列时出现 Python 类型错误
- apache-kafka - 重新阅读一个Kafka主题
- eclipse - 在 Eclipse 编辑器中标记一些文本,然后键入,有时它会替换,但有时它会插入!为什么?
- c++ - 反对在名称空间内、头文件中使用的一般规则的 C++ 例外
- windows - Docker 安装的卷有时仍然是空的
- javascript - Chart.js:无法读取 null 的属性“转换”