Question

我从div click和a获取方向，尝试将其传递给animate函数

var direction = $(this).attr('class').split(' ')[1];
var scrollAmount = 285;
$('#slider').animate({direction:'-=' + scrollAmount}, 'slow');

有什么问题？

由于

Answer 1

animate函数的第一个参数接受CSS属性，说明动画结束的最终属性。你无法通过这种方式传递方向。听起来你要么设置左边或者滚动左边的数量并改变方向，那么你应该看看方向的值，并根据你想要的方式使用 - =或+ =。

var sign;

if (direction == 'left') sign = '-=';
else sign = '+=';

$('#slider').animate({left:sign + scrollAmount}, 'slow');

或者，如果它是您要传递的属性

var prop = {};
prop[direction] = scrollAmount;
$('#slider').animate(prop, 'slow');

Answer 2

animate中没有这样的属性被称为方向因此错误。检查documentation。

根据评论进行编辑

然后你应该在css中向左或向右传递作为动画的第一个参数

来自jQuery动画API文档的示例代码

<!DOCTYPE html>
<html>
<head>
  <style>
div {
  position:absolute;
  background-color:#abc;
  left:50px;
  width:90px;
  height:90px;
  margin:5px;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="left">&laquo;</button> <button id="right">&raquo;</button>
<div class="block"></div>

<script>
$("#right").click(function(){
  $(".block").animate({"left": "+=50px"}, "slow");
});

$("#left").click(function(){
  $(".block").animate({"left": "-=50px"}, "slow");
});

</script>

</body>
</html>

jquery传递方向为animate（）

2 个答案: