循环列表的jQuery动画 [英] jquery animation of circular list

问题描述

我有一个要旋转的li元素的垂直列表，以使其看起来像在滚轴上(例如老虎机上的图标或密码锁上的数字).我可以通过简单地添加以下内容来创建它:

I have a vertical list of li elements that I want to rotate such that it appears as it is on a roller (like icons on a slot machine or numbers on a combination lock). I can create this by simply adding something like:

$('#list li:first').before($('#list li:last'));

问题有时是列表的长度恰好是可见元素的数量，我要保留的是最后一个元素从底部滑出并同时滑到顶部以创建圆形列表的外观.一种想法是复制列表元素(如果其长度小于可见长度)，并为每个li元素的margin-top属性设置动画以使其向下滑动，但是我有每个列表元素的重复项，是否有更好的方法?

Problem is sometimes the list is exactly the number of visible elements in length and what I would like to retain is the last element sliding off the bottom and concurrently sliding onto the top to create the look of a circular list. One thought was to duplicate the list elements if its length was less than the visible length and animating the margin-top property of each li element to slide down but then I have duplicates of each list element, is there a better way?

任何帮助将不胜感激.

基于以下Alex Ball的响应的旋转功能.

Rotation function based on Alex Ball's response below.

function rotate(direction){
    var firstElem = $('#list ul li:first');
    var lastElem = $('#list ul li:last');
    var elemHeight =  firstElem.height();

    if(direction == 'down') {
        firstElem.animate({'marginTop': '+=' + elemHeight + 'px'}, 500, 'linear', function(){
            $(this).css({'margin-top':0}).before(lastElem);         
        });
    }

    if(direction == 'up') {
        firstElem.animate({'marginTop': '-=' + elemHeight + 'px'}, 500, 'linear', function(){
            lastElem.after($(this));
            $(this).css({'margin-top':0});
        });
    }
}

推荐答案

这是一个示例(我之所以使用老虎机，是因为它是范妮)

this is an example (I've used the idea of slot Machine because is fanny)

我从一些div容器和图像列表(li)开始，但是这个想法对其他类型也适用.

I started with some div container and list (li) of images, but the idea is valid for other types.

死记硬背的JS:

function rotate(id, n){

    console.log(id);    

     $('#'+id+' ul li:first').animate({'margin-top': '-='+$(this).height()+'px'}, 400, 'linear', function(){

          $(this).css({'margin-top':0}).parent().append($(this));

          i++;

          console.log('id: '+id+' i: '+i+' n: '+n);

          if(i < n) rotate(id, n);

     });

}

查看实际情况 FIDDLE

这篇关于循环列表的jQuery动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！