Question

我想将踏板车从右向左移动

在这里你可以看到滑板车。我希望当页面完成加载时我希望滑板车靠近那把椅子，那位女士坐着。

这是我的代码： -

.inner-girl-icon {
  float: right;
  margin: 5px 262px;
  max-width: 75px;
  width: 100%;
}

<div class="col-md-8 col-sm-8 col-xs-12">
  <div class="girl-icon">
    <span class="inner-girl-salon"><img src="{{ asset('images/demo/salon-icon.png') }}" class="img-responsive"></span>
  </div>
  <div class="girl-icon">
    <span class="inner-girl-icon"><img src="{{ asset('images/demo/demo1.jpg') }}" class="img-responsive"></span>
  </div>
</div>

Answer 1

您可以在 CSS3 中添加animation，将滑板车元素移到主席旁边。

使用 Jquery 添加ready event添加您的动画class。

实施例

$(document).ready(function(){
  $(".scooter").addClass("animon");
});

.container{
  position:relative;
}

.chair{
  position:absolute;
  left:50px;
  background-color:blue;
  width:40px;
  height:40px;
}

.scooter{
  position:absolute;
  left:400px;
  background-color:green;
  width:40px;
  height:40px;
}

.animon{
  animation:animscooter 2s ease-out forwards;
}

@keyframes animscooter{
  0%{
    left:400px;
  }
  100%{
    left:90px;
  }
}

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

Answer 2

试试这段代码

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background: yellow;
    position: relative;
    -webkit-animation: myfirst 5s infinite; /* Safari 4.0 - 8.0 */
    -webkit-animation-direction: alternate; /* Safari 4.0 - 8.0 */
    animation: myfirst 5s 3s;
    animation-direction: alternate;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes myfirst {
    25%  {background: yellow; left: 200px; top: 0px;}
}

@keyframes myfirst {
    25%  {background: yellow; left: 200px; top: 0px;}
}
</style>
</head>
<body>

<div></div>


</body>
</html>

根据您的要求改变方向

Answer 3

$(window).on('load', function() {
   // executes when page is fully loaded, including all frames, objects and images
   $("#scooter").animate({left: "100px"});
});

此处有更多详情： http://api.jquery.com/animate/

在这里： Difference between $(window).load() and $(document).ready() functions

Answer 4

这是一个工作示例，它关注容器div，它是通过继承更改一些HTML的“子”和“滑板车”，它的个人CSS设置为其设置ID。

2秒后我换了浮球。

看看：

// Wait for DOM load
$(document).ready(function() {
  // The element goes left 2 seconds later for example
  setTimeout(function() {
    // Changing the CSS attribute
    $('#scooter').css('float', 'left');
    // Console message
    console.log('changed!');
  }, 2000);
});

/* Instead of margin in girl-icon i'm setting default width to both containers */
.girl-icon {
  width: 100px;
  float: left;
}

/* Scooter default CSS */
#scooter {
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-8 col-sm-8 col-xs-12">
<div class="girl-icon">
  <!-- Converted to div -->
  <div class="inner-girl-salon">
    <!-- Represents the 1st image -->
    <div id="person">person</div>
  </div>
  <!-- Clear both -->
  <div style="clear:both"></div>
</div>
<div class="girl-icon">
  <!-- Converted to div -->
  <div class="inner-girl-icon">
    <!-- Represents the 2nd image -->
    <div id="scooter">scooter</div>
  </div>
  <!-- Clear both -->
  <div style="clear:both"></div>
</div>

<!-- Clear both -->
<div style="clear:both"></div>

如何在html中移动对象？

4 个答案: