DIV動畫滑動問題

Question

http://jsfiddle.net/fVKDy/11/

我正在修復此動畫，如果可能的話。第一部分完美地工作，DIV幻燈片向左滑動顯示更多內容。反過來並不是因爲內容DIV沒有正確顯示，而且下面的DIV也沒有向下滑動。

任何幫助表示讚賞。

正是這種討論從昨日延續Animating a DIV automatically

 $(function() { 
$(".left_slide").click(function() { 
    $("#inner_container").stop(true, true).animate({ left: -400 }, 500, function(){ 
     $(".block1").stop(true, true).animate({height: "1px"},1000); 
    }) 
}); 
}); 
$(function() {  
$(".right_slide").click(function() { 
    $("#inner_container").stop(true, true).animate({ left: 0 }, 500, function(){ 
     $(".block1").stop(true, true).animate({height: "1px"},1000); 
    }) 
}); 
}); 

CSS

#blog_slide_container { 
position: relative; 
overflow: hidden; 
width: 400px; 
z-index: 5; 
border: 1px solid #000; 
} 

#inner_container{ 
position: relative; 
width: 2000px; 
} 

.block1 { 
position: relative; 
display: inline-block; 
vertical-align: top; 
top: 0px; 
left: 0px; 
width: 400px; 
z-index: 6; 
background-color: #333; 
color: #FFF; 
} 
.block2 { 
position: relative; 
display: inline-block; 
vertical-align: top; 
top: 0px; 
left: 0px; 
width: 400px; 
z-index: 6; 
background-color: #333; 
color: #FFF; 
} 
#bottom_container { 
position: relative; 
float: left; 
width: 100%; 
height: 280px; 
z-index: 3; 
background-color: #000; 
} 

Answer 1

試試這個fiddle：

$(function() { 
    var block1_h = 0; 
    $(".left_slide").click(function() { 
     $("#inner_container").stop(true, true).animate({ 
      left: -400 
     }, 500, function() { 
      block1_h = $(".block1").stop(true, true).animate({ 
       height: "1px" 
      }, 1000).height(); 
     }) 
    }); 
    $(".right_slide").click(function() { 
     $(".block1").stop(true, true).animate({ 
      height: block1_h 
     }, 1000, function() { 
      $("#inner_container").stop(true, true).animate({ 
       left: 0 
      }, 500); 
     }); 
    }); 
}); 

我只是不停的原始.block1高度變量。這樣我可以完全顛倒動畫的順序。

Answer 2

我以爲昨天Animating a DIV automatically

我們固定它把這個http://jsfiddle.net/skram/fVKDy/17/