как анимировать css-свойство по переменной

Question

Можно ли анимировать объект DOM с помощью * css-свойства из переменной в jQuery?

этот код не работает, где ...

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){}

Также вы передаете второй параметр в качестве объекта, используйте вместо этого:

.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(){})