Question

Is it possible to animate a DOM Object by a css-property from a variable in jQuery ?

this code does not work, where…

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

Does anybody know a work around ?

Answer 1

You could use the eval() function, but that’s not a nice solution at all.

A better method would be to simply use the _direction variable as a flag, try this:

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