Question

是否可以通过jQuery中的变量的 css-property为DOM对象设置动画？

此代码不起作用，其中......

HTML：

<a data-direction="prev" title="" href="#">prev</a> <a data-direction="next" title="" href="#">next</a>

的javascript：

var _direction = $(this).data('direction'), _padding = (_direction == 'prev') ? 'margin-left' : 'margin-right'; //set css $(this).animate({_padding:$(this).width(), opacity: 0},{duration: 320, complete: function() { console.log("done!"); $(this).removeAttr('style'); } });

有人知道解决方法吗？

Answer 1

您可以使用eval()功能，但这根本不是一个好的解决方案。

更好的方法是简单地使用_direction变量作为标志，试试这个：

var _direction = $(this).data('direction')
var settings = { opacity: 0 };

if (_direction == 'prev') 
    $.extend(settings, { margin-left: $(this).width() });
else
    $.extend(settings, { margin-right: $(this).width() });

$(this).animate(settings, {duration: 320, complete:
    function() {
        console.log("done!");       
        $(this).removeAttr('style');
    }
});

Answer 2

我认为你的问题是填充前的_，这不起作用，因为它不是有效的属性。 jQuery无法处理这样的IE黑客攻击。如果您只想在IE浏览器中制作动画，则必须使用以下内容：

if($.brower.msie && $.browser.version == 7.0){}

此外，您将第二个参数传递为Object，请改用：

.animate({}, 320, function(){});

如果您不想设置_padding的属性，这是一个变量，您必须生成如下对象：

var _direction = $(this).data('direction'),
_padding = (_direction == 'prev') ? 'margin-left' : 'margin-right'; //set css

var animationData = {opacity: 0};
animationData[_padding] = $(this).width();

// And within animate
.animate(animationData, 320, function(){})

如何通过变量为css属性设置动画

2 个答案: