Question

我在使用jQuery的animate函数处理动态值时遇到问题。我创建了一个函数，它将接受一个DOM元素以及一些动画制作选项。

这是我的HTML：

<div class="container">
    <h2> CSS Transform Translate </h2>
    <p> For Moving the Heading </p>
</div>

这是我的CSS：

body {
    font-family: 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.5em;
    color: #333333;
    padding: 40px 0;
}
h2 { border: 1px solid lightblue; }
p { border: 1px solid lightgreen; }

这是我的JavaScript：

var a = function(element, options) {

    if( ! element ) return false;

    options = options || {};

    var property = options.property || 'transform',
        value    = options.value    || 'translateY(-100px)',
        timing   = options.timing   || 3000;

    return $(element).animate({

        property : value

    }, timing);

};

a('h2');

当我自己调用我的函数a和DOM元素时，它不会触发动画。函数a运行，将DOM元素返回到控制台，但页面上没有任何反应，通过动画应用的css也不会显示在Web检查器中。

当传递每个选项时，同样的情况发生。

以下是它的小提琴：http://jsfiddle.net/loxyboi/ahuk5c1r/

Answer 1

我不相信您可以使用transform功能为animate设置动画。您可以使用CSS转换，并使用jQuery添加它们。例如：

$('h2').css({
    'transform': 'translateY(-100px)',
    'transition': 'transform 3s ease-in'
});

DEMO：http://jsfiddle.net/StathisG/pa3f61bc/

除此之外，你的函数的问题是你不能以这种方式将变量传递给animate函数。

所以，而不是：

return $(element).animate({
    property : value
}, timing);

您可以执行以下操作：

var animation_options = {}
animation_options[property] = value;
return $(element).animate(animation_options, timing);

DEMO：http://jsfiddle.net/StathisG/0bq56kaz/

另外，我删除了你在那里的setTimeout，因为它似乎没有意义（至少在这个例子中）。

jQuery Animate不使用作为函数内部参数传递的值

1 个答案: