0

我正在尝试从下到上滑动 div。我有 3 个 div。在前两个将是可见的，

点击：

1st div get hides.
2nd div takes 1st div position.
3rd div takes 2nd div position.

再次点击：

2nd div get hides.
3rd div takes 2nd div position 
1st div takes 3rd div position.

检查这个：- http://jsfiddle.net/2cz5v/5/

工作 3 次点击，然后它开始交换 div。请帮帮我。

4

2 回答 2

2

我取了你的 div 的初始位置并将它们设置在一个数组中，然后让你的 click 函数在这些初始位置之间进行动画处理。

    var places = [
    {
        top: $('#div1').offset().top, //100,
        left: $('#div1').offset().left, //100,
        width: $('#div1').width(), //80,
        height: $('#div1').height(), //30,
        opacity: 100
    },
    {
        top: $('#div2').offset().top, //200,
        left: $('#div2').offset().left, //100,
        width: $('#div2').width(), //80,
        height: $('#div2').height(), //30,
        opacity: 100
    },
    {
        top: $('#div3').offset().top, //300,
        left: $('#div3').offset().left, //100,
        width: $('#div3').width(), //80,
        height: $('#div3').height(), //30,
        opacity: 0
    }
];

然后在更新声明中

    $("#div"+j).animate({top: places[0].top, left: places[0].left, height: places[0].height, width: places[0].width, opacity: places[0].opacity}, 1000);
    $("#div"+k).animate({top: places[1].top, left: places[1].left, height: places[1].height, width: places[1].width, opacity: places[1].opacity}, 1000);
    $("#div"+l).animate({top: places[2].top, left: places[2].left, height: places[2].height, width: places[2].width, opacity: places[2].opacity}, 1000);

在这里查看

于 2012-12-18T19:06:41.940 回答
1

您可以结合CSS3 过渡来旋转类以获得相当简单的解决方案

示例 jsfiddle

HTML：

<div id="div1" class="rotate firstdiv">div #1</div>
<div id="div2" class="rotate seconddiv">div #2</div>
<div id="div3" class="rotate thirddiv">div #3</div>                
<button id="moveitButton">move it!</button>​

CSS：

...
.rotate {
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    -o-transition:all .5s;
    -ms-transition:all .5s;
    transition:all .5s;
}

JavaScript/jQuery：

var $rotateDivs = $('.rotate');

$("#moveitButton").click(function() {
    $rotateDivs.each(function() {
        var $this = $(this);

        if ($this.hasClass('firstdiv')) {
            $this.removeClass('firstdiv').addClass('thirddiv');
        } else if ($this.hasClass('seconddiv')) {
            $this.removeClass('seconddiv').addClass('firstdiv');
        } else if ($this.hasClass('thirddiv')) {
            $this.removeClass('thirddiv').addClass('seconddiv');            
        }
    });
});

注意：IE 10+ 支持 CSS3 过渡 - http://caniuse.com/#search=transitions

于 2012-12-18T19:34:34.773 回答