使用Javascript隐藏兄弟框动画
使用Javascript隐藏兄弟框动画
提问于 2019-05-09 06:52:26
我想在这里动画一些javascript，但是找不到一个好的解决方案。我想要做的是：-当你点击一个框时，所有其他的框都会一个接一个地消失。-如果盒子是最后一行，那么它将从最后一块滑到第一块，向左滑动，然后随着盒子消失而滑到下一行
现在，我已经做了一些简单的jquery，但是它们同时消失了，所以感觉非常奇怪！但是我想不出如何正确地设置动画。我的代码现在看起来像这样：
<div class="col-12 col-sm-6 col-lg-6 col-xl-3 border border-default py-5 team-box">
<h4 class="px-5">Lorem ipsum dolor</h4>
<a href="#" class="button-link px-5">
Click Here
<span class="btn-inner--icon">
<img
src="arrow-right-black.svg"
alt="arrow-right-black"
/>
</span>
</a>
</div>$(".team-box").on("click", function() {
event.preventDefault();
$(this).siblings().hide();
});有人能指导我如何做到这一点吗？非常感谢各位！
回答 1
Stack Overflow用户
发布于 2019-05-09 07:00:56
您可以使用first()获取第一个兄弟姐妹
$(".team-box").on("click", function() {
event.preventDefault();
var first = $(this).siblings('.team-box').first();
$(first).hide();
});
$(".team-box").on("click", function() {
event.preventDefault();
var first = $(this).siblings('.team-box').first();
$(first).hide();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12 col-sm-6 col-lg-6 col-xl-3 border border-default py-5 team-box">
<h4 class="px-5">Lorem ipsum dolor</h4>
<a href="#" class="button-link px-5">
Click Here
<span class="btn-inner--icon">
<img
src="arrow-right-black.svg"
alt="arrow-right-black"
/>
</span>
</a>
</div>
<div class="col-12 col-sm-6 col-lg-6 col-xl-3 border border-default py-5 team-box">
<h4 class="px-5">Lorem ipsum dolor</h4>
<a href="#" class="button-link px-5">
Click Here
<span class="btn-inner--icon">
<img
src="arrow-right-black.svg"
alt="arrow-right-black"
/>
</span>
</a>
</div>
<div class="col-12 col-sm-6 col-lg-6 col-xl-3 border border-default py-5 team-box">
<h4 class="px-5">Lorem ipsum dolor</h4>
<a href="#" class="button-link px-5">
Click Here
<span class="btn-inner--icon">
<img
src="arrow-right-black.svg"
alt="arrow-right-black"
/>
</span>
</a>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56050041
复制相关文章
相似问题