jquery - 如何平滑地更改元素的左侧边距答案

【问题标题】：jquery - How to make change margin-left of an element smoothlyjquery - 如何平滑地更改元素的左侧边距
【发布时间】：2015-03-16 17:56:36
【问题描述】：

我有一个 div，如果一个人悬停在它上面，我希望它的左边距为 200px，如果发生 mouseleave，它的左边距为 0px。它可以工作，但我希望它顺利进行，以便它在一定时间内完成。我是 jQuery 新手，那么我该如何实现呢？这是我的代码：

<!DOCTYPE html>
<html>
<head><link rel="stylesheet" type="text/css" href="bootstrap.min.css"><script src="jquery.js"></script></head>
<body>
    <div style="width:100px;height:100px;background:orange;margin-top:300px;border-radius:100%;"></div>
    <script>
    $(document).ready(function(){
        $('div').mouseenter(function(){
            $(this).css("margin-left",200);
        });
        $('div').mouseleave(function(){
            $(this).css("margin-left",0);
        });
    });
    </script>
</body>

【问题讨论】：

看看$.animate( )。仅使用 CSS 也可以更轻松地完成此效果。
你能给我语法吗？

标签： jquery css

【解决方案1】：

试试这个

$(document).ready(function(){
        $('div').mouseenter(function(){
         $(this).animate({'margin-left': '200'}, 'slow');
        });
        $('div').mouseleave(function(){
         $(this).animate({'margin-left': '0'}, 'slow');
        });
    });

Working Demo

.animate() 方法允许我们在任何数字 CSS 属性上创建动画效果。唯一需要的参数是 CSS 属性的普通对象。这个对象类似于可以发送到.css() 方法的对象，只是属性的范围更受限制。

【讨论】：

【解决方案2】：

你可以不用jQuery，只用CSS来实现它：

#box {
  width: 200px;
  height: 150px;
  background-color: red;
  float: left;
  transition: margin-left 300ms ease-in-out;
}

#box:hover {
  margin-left: 200px;
}

&lt;div id="box"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

试试这个，

$(document).ready(function(){
    $('div').mouseenter(function(){
        $(this).animate({"margin-left":200},1000);
    });
    $('div').mouseleave(function(){
        $(this).animate({"margin-left":0},1000);
    });
});

$(document).ready(function() {
  $('div').mouseenter(function() {
    $(this).animate({
      "margin-left": 200
    }, 1000);
  });
  $('div').mouseleave(function() {
    $(this).animate({
      "margin-left": 0
    }, 1000);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:100px;height:100px;background:orange;margin-top:300px;border-radius:100%;">test</div>

【讨论】：

【解决方案4】：

试试这个

 $(document).ready(function(){
    $('div').mouseenter(function(){
        $(this).animate({ marginLeft: '200px'}, 500);
    });
    $('div').mouseleave(function(){
        $(this).animate({ marginLeft: '0px'}, 500);
    });
});

500代表动画的速度，表示边距变化的平滑程度。

【讨论】：

【解决方案5】：

$(document).ready(function(){
  $( "div" )
  .mouseover(function() {
    $(this).animate({'margin-left': '200'}, 500);
  })
  .mouseout(function() {
    $(this).animate({'margin-left': '0'}, 500);
  });
});

【讨论】：

工作完美。谢谢
你能确认答案吗？谢谢。
很抱歉，我的名声太小，不能这样做。

【解决方案6】：

您可以使用 CSS3 On hover http://www.w3schools.com/css/css3_transitions.asp 实现相同目的

此外，如果您需要通过 jquery 进行平滑过渡，那么您也可以尝试 Jquery 转换或动画。

示例插件http://ricostacruz.com/jquery.transit/

【讨论】：

【解决方案7】：

检查这个 https://jsfiddle.net/p16dLtpg/

$(document).ready(function(){
        $('div').mouseenter(function(){
            $(this).animate({'margin-left':200},900);
        });
        $('div').mouseleave(function(){
            $(this).animate({'margin-left':0},900);
        });
    });

你必须使用jquery animate

【讨论】：

【解决方案8】：

通过使用 CSS3 过渡属性，我们可以平滑地移动元素。

[http://jsfiddle.net/stanze/jsy59kmt/][1]

【讨论】：