如何使用 jquery 在动画后更改 <li> 位置？答案

【问题标题】：How to change <li> position after animation using jquery?如何使用 jquery 在动画后更改 <li> 位置？
【发布时间】：2013-07-23 15:35:56
【问题描述】：

我有一个 jquery 图像滑块，它设置为将图像向左移动 -100%。
当图像向左时：-100%；有没有办法让它回到循环的开始？

<div id="homeslider" class="firefly_slider_wrapper">
    <div class="firefly_slider">
        <ul id="ffslider">
            <li class="slide">
                <div class="slideplacment">
                    <img src="" name="0" />
                </div>
            </li>
            <li class="slide">
                <div class="slideplacment">
                    <img src="" name="1" /> 
                </div>
            </li>
        </ul>
    </div>
</div>

脚本如下所示：

jQuery(window).load(function(){ 
var tl2 = new TimelineMax({onComplete: upDatePosition});
var imgArray = [];
var imgLength = 0;
var photoContWidth = 0;
var imgWidth = 0;
n = jQuery("#ffslider li").length;

function setDefaults(){ 
      imgLength = jQuery('#ffslider li').length;
      photoContWidth = (imgLength * 100) + '%';
      for(var i=0; i<imgLength; i++){
                jQuery('#ffslider li').eq(i).attr('name',i);            
                jQuery('#ffslider li').eq(i).css('left', (i * 100) + "%");
                imgArray.push(jQuery('#ffslider li').eq(i));
      } 
        startAnimation();
    };

    function startAnimation(){
        tl2.to(imgArray, 1, {left:'-=100' + '%', delay:3});
    }

    function upDatePosition(){
        for(var i=0; i<imgLength; i++){
            if((imgArray[i].css('left') <= -100 + '%')){
              imgArray[i].css("left",  (n - 1) * '100' + '%'); 
            } 
        }
      startAnimation();
    }
    setDefaults();
});

它是动态的并用于 WordPress 主题。

【问题讨论】：

请提供您目前拥有的代码。这还不够。
考虑到<UL> 包含一组<LI>s，您可以删除第一个并附加到末尾。但是如果我们看到你的代码会更好。
@JonathasPacífico 这正是我想要做的，但只是不知道如何让它工作
@user1887669，以前的答案对您有帮助吗？如果它不只是让我知道，我们会找到办法。

标签： jquery css wordpress slider wordpress-theming

【解决方案1】：

.animate() 函数有一个可以使用的回调方法。这是一个简单的例子

HTML

<div></div>

CSS

div
{
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    left: 0;
}

jQuery

$("div").click(function() {
    $(this).animate({left: '-100%'}, 1000, function() {
        alert('Move left animation finished...');
        $(this).css({left: 0});
    });
});

JSFiddle

http://jsfiddle.net/7BVz4/1/

【讨论】：

【解决方案2】：

扩展我之前的答案；这是一个实际的例子：

HTML

<div class="rotator-container">
    <div class="rotator">
        <span id="s1"></span>
        <span id="s2"></span>
        <span id="s3"></span>
    </div>
</div>

<a href="#">Show/hide</a>

CSS

.rotator-container
{
    border: 1px solid black;
    height: 100px;
    width: 100px;
    overflow: hidden;
}

.rotator
{
    width: 3000px;
}

span
{
    width: 100px;
    height: 100px;
    display: block;
    float: left;
}

#s1 { background-color: red; }
#s2 { background-color: green; }
#s3 { background-color: blue; }

.sized
{
    width: 250px;
    height: 110px;
}

jQuery

// Initialise...
d();

function d() {
    // Remember our parent and first child elements
    parent = $('.rotator');
    firstChild = parent.find('span:first');

    // Slide left animation
    firstChild.animate({'margin-left': -100}, 1000, function() {
        // Remove the current element and reset the margin
        firstChild.remove().css({'margin-left': 0});
        // Add the element back to the end of the parent
        parent.append(firstChild);

        // Callback to self (repeat the animation!)
        d();
    });  
};

$('a').click(function(e) {
    e.preventDefault();
    $('.rotator-container').toggleClass('sized');
});

JSFiddle

http://jsfiddle.net/gvee/tuuVe/

【讨论】：