0

divを下から上にスライドさせようとしています。私は3つのdivを持っています。その最初の2つが表示されます、

クリック時：

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の初期位置を取得して配列に設定し、クリック機能でそれらの初期位置間をアニメーション化しました。

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

注：IE10+はCSS3トランジションをサポートしています-http: //caniuse.com/#search=transitions

于 2012-12-18T19:34:34.773 に答える