javascript - 使用动画将元素从一个父元素移动到另一个父元素

标签 javascript jquery html css animation

我正在尝试创建自定义轮播。它的工作方式是元素包含在两个“堆”中,两个堆包含相同的元素。

当您单击“下一步”按钮时,第二堆最上面的元素将移动到第一堆的顶部。第一堆中的最后一项将移到第二堆的底部,这意味着两堆总是包含相同数量的元素。

点击“prev”按钮时需要执行反向动画。

将元素从第二堆移到第一堆时,需要用动画来实现。

我在这里创建了一个 fiddle https://jsfiddle.net/n109rpp0/3/使用到目前为止我制作的 HTML,但我正在努力寻找一种制作动画的方法。

我不确定我是否采取了正确的方法,例如通过将元素复制到两个 ul 元素中。另外,如何确保元素以正确的顺序循环?

有人对我应该如何处理这件事有任何想法吗?

最佳答案

这里是一个快速的想法,如何实现你想要的。添加这个:

$(prevItem).animate({left: '-345px', top: '-30px', width: '+=50px', height: '+=50px'});
    $(prevItem).css('zIndex', '1');

到你的下一个按钮功能。

您需要玩转代码才能实现完美过渡。 这是更新的 fiddle

Google animate function for jQuery,你会找到更多的例子

关于javascript - 使用动画将元素从一个父元素移动到另一个父元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45698746/

相关文章:

javascript - 使用 for 循环生成 Html 表

javascript - Symfony Ajax 请求错误 500

javascript - 安卓浏览器 : touchcancel being fired althought touchmove has preventDefault

html - 表格边框未在 HTML4+ 中绘制

javascript - 隐藏仅包含 <script> 标签的 div

javascript - 使用参数动态引用json对象

Javascript快速排序二维数组

javascript - 如何将简单的ID(jquery ajax)发布到asp.net mvc中的Action方法

javascript - 为什么轨道图像 slider 插件不起作用?

html - Segoe UI Light 字体在 Google Chrome 中无法正确显示