Question

下一个HTML：

<div class="garden">
    <div class="point left">&#9668;</div>
        <div class="trees">
            <div id="apple">Apple</div>
            <div id="cherry">Cherry</div>
            <div id="pear">Pear</div>
            <div id="oak">Oak</div>
            <div id="fir">Fir</div>
        </div>
    <div class="point right">&#9658;</div>
</div>

和CSS：

.garden { position: absolute; top: 135px; left: 150px; }
.garden > div { display:inline-block; }
.trees { width:550px; height:53px; position:relative; font-size:70%; }
.point { width: 16px; height: 15px; background: url(/point-sprite.png) no-repeat;}
.point.left  { background-position: -16px 0; }
.point:hover { background-position: 0 0; }
.point.right { background-position: -32px 0; }
.point:hover { background-position: -48px 0 }
.trees > div span { min-width:50px; position:absolute; display:inline-block; top:25px; left:15px; text-align:center; }

#apple, #cherry, #pear, #oak, #fir { position: absolute; color: #0094d9; }
#apple { top: 10px; }
#cherry { top: 2px; left: 90px; }
#pear { left: 180px; }
#oak { left: 280px; }
#fir { top: 2px; left: 373px; }

每次点击后，我需要将元素的位置改为左边的＃34;指向左边＆＃34;。每次点击后右边都是右边的＃34;当一个项目的最左侧位置并点击＆＃34;指向左侧＆＃34;那么这个项目应该是正确的位置。一个伟大的人（https://stackoverflow.com/users/2121519/stuart-miller）帮助我创建下一个剧本：

JS

$(document).ready(function () {

    function changePositionLeft() {

        var trees = $('#trees');

        trees.children().each( function(index, child) {
            if (index == 0) {
                $(child).animate(trees.children().last().position());
            }
            else {
                $(child).animate(trees.children().eq(index - 1).position());
            }
        });

        trees.children().first().appendTo(trees);        
    }

    $(".point.left").click(function() {
        changePositionLeft();
    });
});

使用.clone根据我的任务帮助转换它。提前致谢脚本链接：http://jsfiddle.net/8kkfw7mu/5/

Answer 1

您希望我们对changePositionRight函数进行编码吗？

如果是，here it is。

我保留了与changePositionLeft方法相同的结构，但更改了以下内容：

if (index == trees.children().length -1) {
    $(child).animate(trees.children().first().position());
}

我们不是将第一个元素作为目标并将其置于最后一个位置，而是将最后一个元素作为目标，并将其放在第一个位置。

然后：

else {
   $(child).animate(trees.children().eq(index + 1).position());
}

不要将其他元素移动到上一个位置，而是将它们移动到下一个位置。

最终结果

将此添加到您的脚本中：

function changePositionRight(){
    var trees = $('#trees');
    trees.children().each( function(index, child) {
        if (index == trees.children().length -1) {
            $(child).animate(trees.children().first().position());
        }
        else {
            $(child).animate(trees.children().eq(index + 1).position());
        }
    });

    trees.children().last().appendTo(trees);        
}

$(".point.right").click(function() {
   changePositionRight();
});

使用.clone（）和.animate（）为.click（）上的元素添加动画效果

1 个答案:

最终结果