Question

我有一个div，我希望如果一个人在它上面盘旋，它的边距左边将是200px和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>

Answer 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()方法的对象，但属性范围更具限制性。

Answer 2

你可以在没有jQuery的情况下实现它，只能使用CSS：

＆＃13;

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

＆＃13;

<div id="box"></div>

＆＃13;

Answer 3

试试这个，

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

试试这个

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

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

Answer 5

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

Answer 6

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

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

Answer 7

你可以使用CSS3在悬停http://www.w3schools.com/css/css3_transitions.asp

上实现相同的目标

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

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

Answer 8

检查一下 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

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

8 个答案: