0
我最近一直在嘗試使用jquery來創建和html動畫，並且我正在嘗試使條形圖向右浮動，因爲它當前浮動到左側。雖然當我嘗試這樣做，它不會工作，請幫助如何做jquery動畫正確浮動
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" href="assests/css/main.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".bar").animate({float: 'right'});
});
</script>
</head>
<body>
<div id="wrapper" align="center" >
<div class="obj">
<div class="bar"></div>
<div class="body">
<h1> Welcome </h1>
</div>
</div>
</div>
</body>
</html>
的CSS：
@import url(https://fonts.googleapis.com/css?family=Raleway);
* {
margin:0px;
padding:0px;
font-family:Raleway;
}
#wrapper {
width:100%;
height:100vh;
}
.obj {
width:500px;
height:200px;
margin-top:14%;
}
.bar {
float:left;
height:200px;
width:5px;
background-color:#95a5a6;
transition: all .5s ease-in-out;
}
.body {
width:495px;
height:200px;
float:right;
}
.body > h1 {
font-size:70px;
color:#333;
padding-top:50px;
}
您無法爲'float'屬性設置動畫。你最好的選擇是讓元素「position：absolute」，然後動畫它的「左」和/或「右」位置。我想這會花費相當數量的HTML重新工作。 –
@RoryMcCrossan好的，謝謝你的幫助，我會確保你看看！ –