從底部到頂部滑動div

我想從底部到頂部滑動div。我有3個div。在這前兩個是可見的，從底部到頂部滑動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次點擊，然後開始交換divs。請幫助我。

來源

2012-12-18 Raghuveer

我把你的divs的初始位置，並將它們放在一個數組中，然後讓這些初始位置之間的點擊函數動起來。

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 
    } 
];

再後來就在update語句

$("#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

來源

2012-12-18 19:06:41 jackofallcode

你可以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

來源

2012-12-18 19:34:34 MikeM

您的岩石，有一個比較簡單的解決方案使用css3，但我的意圖是支持所有舊的瀏覽器。謝謝回覆。 – Raghuveer

從底部到頂部滑動div

回答

相關問題