如何正确执行Jquery动画浮动

How to do Jquery Animation Floating Correctly

本文关键字：动画 Jquery 何正确 执行      更新时间：2023-09-26

我最近一直在尝试使用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;
}

您可以像这样对位置进行动画处理：

$(document).ready(function() {
    $('.bar').animate({"left" : 700 +'px'});
});

http://codepen.io/anon/pen/eZpbaP

相关文章：