how to animate a css-property by variable

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 ?

Rory McCrossan · Accepted Answer · 2011-11-18 10:54:37Z

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

edited Nov 18, 2011 at 10:54

answered Nov 18, 2011 at 10:49

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Niels · Accepted Answer · 2011-11-18 10:47:41Z

I think your issue is the _ before padding, this won't work because it's not a valid property. jQuery can't handle IE hacks like this. If you only want to animate when it's IE you have to use Something like:

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

Also you are passing a second param as Object, use this instead:

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

If you wan't to set the property of _padding which is a variable you have to generate an object like:

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

Collectives™ on Stack Overflow

how to animate a css-property by variable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related