我正在尝试创建自定义轮播。它的工作方式是元素包含在两个“堆”中,两个堆包含相同的元素。
当您单击“下一步”按钮时,第二堆最上面的元素将移动到第一堆的顶部。第一堆中的最后一项将移到第二堆的底部,这意味着两堆总是包含相同数量的元素。
点击“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/