Question

我试图从底部到顶部滑动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。请帮帮我。

Answer 1

我获取了div的初始位置并将它们设置为数组，然后让您的点击功能在这些初始位置之间生成动画。

    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);

查看here

Answer 2

您可以将这些类与CSS3 transitions一起旋转，以获得相当简单的解决方案

example 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

从底部到顶部滑动div

2 个答案: