Question

我最近一直在尝试使用Jquery创建和html动画，我试图让一个向右浮动的条形图，因为它当前浮动到左边。虽然当我尝试这样做时它不会工作请帮助

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;
}

Answer 1

您可以像这样设置位置：

$(document).ready(function() {

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

});

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

如何正确浮动Jquery动画

1 个答案: