我想實現與jQuery動畫和絕對位置

Question

在一個div的效果我有兩個相同大小的圖像滿了，

<img id="second image"> 
<img id="first image"> 

的效果是：

1.已經顯示的圖像（第一圖像）崩潰與底部固定的，第二圖像輥來與頂部固定 2.然後我插入第一圖像之前在代碼第二圖像，利用CSS位置而改變，就像上面

第一步做得很好，但在第二步驟不起作用

the code and example is here

請幫幫我，謝謝

Answer 1

這是你想要的東西的更新，希望這個作品，你到底要：

var stimer; 
var updown = true; 
$(function() { 
    function circling(){ 
     if(updown === true){ 
       $('#up').css('top',0).animate({ height: "59px" }, 1000); 
      $('#down').css('top',0).animate({ height: 0, top:'59px' }, 1000); 
       updown = false; 
      } else { 
       $('#up').animate({ height: "0",top:'59px' }, 1000); 
       $('#down').css('top',0).animate({ height: '59px' }, 1000); 
       updown = true; 
      } 
    } 
    stimer = setInterval(function(){circling();}, 2000); 
}); 

也將它添加到CSS

h1{overflow:hidden;} 

Answer 2

這裏是解決方案： 我更新了2線 1）$（ '＃向下'）的CSS（{頂： 「0」}）; 爲 $（'＃down'）。css（{top：「59px」}）; ，而此框在摺疊時應位於此位置。

2）行： $（'＃down'）。animate（{height：「59px」，'top'：'0'}，{duration：1000}）; 爲'頂部'屬性設置動畫。

下面是它的代碼看起來應該像：

 $(function() { 
     function x() { 
       $('#down').insertBefore('#up'); 
       // The line was update 
       $('#down').css({ top: "59px" }); 
       $('#up').css({ bottom: "0" }); 
      // Also this line was updated. 
      $('#down').animate({ height: "59px",'top':'0' }, { duration: 1000 }); 
       $('#up').animate({ height: "0" }, { duration: 1000 }); 

     } 

     $('#down').animate({ height: "0" }, { duration: 1000 }); 
     $('#up').animate({ height: "59px" }, { duration: 1000, complete: x }); 
    }); 

Answer 3

使用此變化：

css: 
#up{ background:red;}   
#down{ background:yellow;} 
.top{ height:0px; top:0px; } 
.bottom{ height:59px; bottom:0px;} 

的javascript：

$(function() { 
    function x() { 
     $('h1').last().insertBefore($('h1').first()); 

     $('h1').first().removeClass(); 
     $('h1').first().addClass("top"); 
     $('h1').last().removeClass(); 
     $('h1').last().addClass("bottom"); 

     $('h1').first().animate({ height: "59px"}, { duration: 1000}); 
     $('h1').last().animate({ height: "0" }, { duration: 1000,complete:x }); 


    } 
    $('#down').addClass('bottom'); 
    $('#up').addClass('top'); 
    $('#down').animate({ height: "0" }, { duration: 1000 }); 
    $('#up').animate({ height: "59px" }, { duration: 1000, complete: x }); 
});