2011-11-18 62 views
0

是否有可能通過jss中的變量的css屬性動畫DOM對象?如何通過變量動畫一個CSS屬性

此代碼不能正常工作,在那裏...

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'); 
    } 
}); 

有誰知道周圍的工作?

回答

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'); 
    } 
}); 
0

我認爲你的問題是填充前的_,這是行不通的,因爲它不是一個有效的屬性。 jQuery無法像這樣處理IE黑客。如果你只想動畫時,它的IE瀏覽器,你必須使用類似:

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

而且你逝去的第二個PARAM作爲對象,而不是使用:

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

如果您wan't到設置哪些是你必須產生這樣一個對象變量_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(){})