【JQ】jQuery的animate动画效果的左移动无效，右移动有效果

qqbnb889 2016-09-08 06:41:38



<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script src="file:///C|/Users/qqbnb/Desktop/web/js/jquery-3.1.0.js"></script>

<script> 

$(document).ready(function(){

  $(".button1").click(function(){

	  $("p").text("移动文本");

    var div=$("div");

    div.animate({paddingRight:"10px",opacity:'0.1'},"slow");

    div.animate({paddingRight:"0px",opacity:'1'},"slow");

  });

 

    $(".button2").click(function(){

		 $("p").text("变化完毕2222");

    var div=$("div");

    div.animate({paddingLeft:'50px',opacity:'0.1'},"slow");

    div.animate({paddingLeft:'0px',opacity:'1'},"slow");

  });

});

</script> 

<style>



div{

	position:absolute;

	top:25%;

	left:25%;

	}

p{

	font-family:"微软雅黑";

	font-size:110px;

	line-height:95px;}

</style>

</head>

 

<body>

<button class="button1">UI</button>

<button class="button2">按钮2</button>

	<div><p>移动文本</p>

</div>



</body>

</html>

为什么呢，求解答，paddingleft也好，left也好，都没有效果，然是paddingright，right可以生效
谢谢大神

...全文

632 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

囧 2016-09-08

打赏
举报

paddingLeft是向右移动.


div.animate({marginLeft::'-50px',opacity:'0.1'},"slow");
div.animate({marginLeft::'0px',opacity:'1'},"slow");

笨猿 2016-09-08

打赏
举报

lz，刚测试，用left可以，用的是ff


$(".button1").click(function(){
      $("p").text("移动文本");
    var div=$("div");
    div.animate({left:"10px",opacity:'0.1'},"slow");
    div.animate({left:"25%",opacity:'1'},"slow");
  });