jquery-如何使元素的左边距平滑变化_Jquery_Css

jquery-如何使元素的左边距平滑变化

jquery css

jquery-如何使元素的左边距平滑变化,jquery,css,Jquery,Css,我有一个div，我想如果有人在上面悬停，它左边的边距将是200px，如果发生鼠标移动，它左边的边距将是0px。这是可行的，但我希望它能顺利进行，这样它能在几秒钟内完成。我是jQuery新手，如何实现这一点？这是我的密码： <!DOCTYPE html> <html> <head><link rel="stylesheet" type="text/css" href="bootstrap.min.css"><script src="jquery

我有一个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>


$（文档）.ready（函数（）{
$（'div'）.mouseenter（函数（）{
$（this.css（“左边距”，200）；
});
$（'div'）.mouseleave（函数（）{
$（this.css（“左边距”，0）；
});
});

试试这个

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

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

.animate（）

方法允许我们在任何数值CSS属性上创建动画效果。唯一需要的参数是CSS属性的普通对象。此对象与可以发送到

.css（）

方法的对象类似，只是属性的范围更严格

试试这个

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

$（文档）.ready（函数（）{
$（'div'）.mouseenter（函数（）{
$（此）。设置动画({
“左边距”：200
}, 1000);
});
$（'div'）.mouseleave（函数（）{
$（此）。设置动画({
“左边距”：0
}, 1000);
});
});

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

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

500表示动画的速度，表示边距变化的平滑程度。
通过使用CSS3过渡属性，我们可以平滑地移动元素
$(document).ready(function(){
  $( "div" )
  .mouseover(function() {
    $(this).animate({'margin-left': '200'}, 500);
  })
  .mouseout(function() {
    $(this).animate({'margin-left': '0'}, 500);
  });
});

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

您可以在悬停时使用CSS3实现同样的功能
另外，如果您需要通过jquery进行平滑转换，那么您也可以尝试jquery转换或动画
示例插件检查此项

您必须使用jquery animate
您可以在没有jquery的情况下实现它，只有使用CSS：

#框{
宽度：200px；
高度：150像素；
背景色：红色；
浮动：左；
过渡：左边缘300ms缓进缓出；
}
#框：悬停{
左边距：200px；
}
看一看。这个效果也可以用CSS来实现。你能告诉我语法吗？效果很好。谢谢你能确认答案吗？谢谢。很抱歉，我的名声太小了，不能这么做。