jquery animate將無法與CSS定位

我剛剛開始與jQuery和一些基本的動畫。確切的說我使用的圖像，使之上去點擊它後：jquery animate將無法與CSS定位

$(function() { 
    $('.rocket').click(function() { 
     $(this).animate({ 
      bottom: 1000 
     }, 2000); 
    }); 
});

我有一個CSS文件附加到HTML代碼，我已經設置畫面相對的位置，其作品。但是，只要我在css中設置了自己的位置（左側：某個值;頂部：某個值等），圖片就不會移動。

我設法只以保證金爲中心在CSS。 CSS中的margin屬性是在中心（或其他地方）設置某種東西的唯一方法，還是我錯過了某些東西？

來源

2017-04-23 Carry

看看我的回答，你不能設置在CSS頂部的值，如果要動畫底部。 – vlk

您可以使用CSS轉換：也可以轉換元素的位置。不，邊距不是中心對齊元素的唯一方法。翻譯或flexbox也可以使用。如果你想看到過渡，請檢查： https://jsfiddle.net/o2gxgz9r/6049/ – Nitesh

確保你已經設置了你的CSS，例如，如果你想動畫底部，你不能設置top。

$('.rocket').click(function() { 
 
      $(this).animate({ 
 
       bottom: 1000 
 
      }, 2000); 
 
});

.container{ 
 
    position:relative; 
 
    height:100vh; 
 
    width:100%; 
 
} 
 

 
.rocket{ 
 
    width:100px; 
 
    height:100px; 
 
    background-color:red; 
 
    position: absolute; 
 
    bottom:0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="rocket"> 
 
    </div> 
 
</div>

來源

2017-04-23 10:28:58 vlk

是的，但他把2 **}）; **。一個關閉功能，另一個關閉文本。我不知道這是否只是格式錯誤。 – vlk

對不起，我想念第一個'$（function（）'導致格式不正確。 – vlk

jquery animate將無法與CSS定位

回答

相關問題