JQuery動畫

這是簡單的向上滑動動畫。問題是，當我更改myDiv類的「頂級」參數時，動畫不正確地工作，而不是向上滑動，從頂部滑落。當我第一次點擊按鈕時，它只會工作不正確。當我將myDiv的頂級參數更改爲更大的數字時，沒有更多問題。你能幫我找出代碼有什麼問題嗎？JQuery動畫

<style> 
    .box { 
     position:relative; 
     width: 200px; 
     height: 500px; 
    } 
    .myDiv { 
     position: absolute; 
     width:100%; 
     overflow: hidden; 
     bottom:0px; 
     top:10px; 
     left:500; 
    } 
</style> 
<script> 
    var swt = 0; 
    $(document).ready(function() { 
     $(".b1").click(function() { 

      var div = $(".myDiv"); 
      if (swt == 0) { 
       div.animate({ 
        top: '300px', 
        opacity: '1' 
       }, "slow"); 
       // div.animate({height:'300px', opacity:'1'},"slow"); 
       swt++; 
      } else { 
       div.animate({ 
        top: '500px', 
        opacity: '1' 
       }, "slow"); 
       // div.animate({height:'0px', opacity:'1'},"slow"); 
       swt--; 
      } 
     }); 
    }); 
</script> 
</head> 
<body> 
    <button class="b1">Start Animation</button> 
    <p>posds</p> 
    <div class="box"> 
     <div class="myDiv" style="background:#7549B1; width:200px;"></div> 
    </div> 
</body> 

</html>

來源

2013-01-25 John Snau

您在css中有一些錯字。爲什麼你在.myDiv中輸入頂部和底部位置，並且lyeft沒有px？ –

沒有myDiv中的頂部位置它是相同的效果，首先它從頂部（僅第一次）下降。然後它正常工作。 –

因爲您的初始頂層poision（在CSS中）與js中的不同。 –

我真的不知道whay效果你想要的，但也許它改變了bottom值，而不是top：

if(swt==0){ 
    div.animate({bottom:'500px', opacity:'1'}, "slow"); 
    swt++; 
} else { 
    div.animate({bottom:'300px', opacity:'1'}, "slow"); 
    swt--; 
}

http://jsbin.com/ixigaf/1/edit

來源

2013-01-25 13:10:39 bfavaretto

我想讓我的div從某個位置出現，向上滑動。我已經檢查過你的樣本，它的工作方式與滑落的方式相同。如果您將myDiv的頂部位置更改爲500px，它將以我需要的方式工作，除非第一次單擊該按鈕時它不會執行任何操作。我會更努力地工作。 –

看看Marcin Bobowsky評論過的內容。如果我理解正確，問題在於你的初始div CSS，而不是js。見http://jsbin.com/ixigaf/27/edit – bfavaretto

我是個白癡，不是向上滑動，而是向下滑動。無論如何，我會嘗試根據你的回答和Marcin的評論來解決它。謝謝。 –

不要在使用bottom和top相同的元素，它會產生衝突。定義高度和animte頂部負值：

Here is jsFiddle.

if(swt==0){ 
     div.animate({top:'-300px', opacity:'1'}, "slow"); 
     swt++; 
}else{ 
     div.animate({top:'-500px', opacity:'1'}, "slow"); 
     swt--; 
}

來源

2013-01-25 13:12:02

http://jsfiddle.net/Cyberek/yLBeK/

這是我的理解馬車，但如果你在CSS頂部更改從10px的爲100px（同JS頂部）一切都應該沒問題。

.myDiv { 
     position: absolute; 
     width:100px; 
     height: 100px; 
     overflow: hidden; 
     top:100px; 
     left:100px; 
     background: red; 
} 

$(".b1").click(function() { 

      var div = $(".myDiv"); 
      if (swt == 0) { 
       div.animate({ 
        top: '100px', 
        opacity: '1' 
       }, "slow"); 
       // div.animate({height:'300px', opacity:'1'},"slow"); 
       swt++; 
      } else { 
       div.animate({ 
        top: '200px', 
        opacity: '1' 
       }, "slow"); 
       // div.animate({height:'0px', opacity:'1'},"slow"); 
       swt--; 
      } 
     });

來源

2013-01-25 13:18:27

我需要現在睡覺，謝謝你的幫助。我明天會解決它。我是一個小菜鳥。 –

回答

相關問題