传递参数以动画 jquery 函数

Pass paramaters to animate jquery function

本文关键字:jquery 函数 动画 参数      更新时间:2023-09-26

我想在自定义函数中传递参数来为特定部分设置动画。 完全不确定我错过了什么?

我创建了一个 JsFiddle

function animate($class,$method,$value,$duration,$delay) {
    var delay_time = 0;
    $($class).each(function() {
        $(this).delay(delay_time).animate({
            $method : $value
        }, {
            duration: $duration
        });
        delay_time += $delay;
    });
}
animate(".container","width", 100, 300, 250);

$method是我试图通过的东西,出于某种原因只是不想工作?我错过了什么?

工作小提琴

你不能像在{$method: $value}中那样定义一个对象,但是你可以在animate方法之外构造你的对象,然后传递它:

var my_object = {};
my_object[$method]=$value;
$(this).delay(delay_time).animate(my_object,{duration: $duration});

希望这有帮助。


function animate($class,$method,$value,$duration,$delay) {
  var delay_time = 0;
  $($class).each(function() {
    var my_object = {};
    my_object[$method]=$value;
    $(this).delay(delay_time).animate(my_object,{duration: $duration});
    delay_time += $delay;
  });
}
animate(".container","width", 100, 300, 250);
.container {
  opacity: 1;
  width: 0;
  background: #0f0;
  height: 100px;
}
p {
  margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <p>show me</p>
</div>
<div class="container">
  <p>show me</p>
</div>