I'm trying to figure out how to use a variable as a css property.
For example: $('.name').animate({variable : 100});
I wrote up a quick example script. My goal is to switch the animation
direction depending on the link that you click. Either have the object
animate from the left or top.
Any ideas how this could be done? Or why this isn't working as
expected?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test</title>
<script src="http://jqueryjs.googlecode.com/files/
jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
img.move { position:absolute; top:50px; }
</style>
</head>
<body>
<img src="http://farm4.static.flickr.com/
3592/3457944882_a0456ee7eb.jpg?v=0" class="move" />
<a href="#" class="top">top</a>
<a href="#" class="left">left</a>
<script type="text/javascript" charset="utf-8">
$(function(){
$('a').click(function(){
var getClass = $(this).attr('class');
var getWidth = $('img.move').outerWidth();
var direction = getClass==='top' ? 'top' : 'left';
$('img.move').animate({direction : getWidth});
console.log(direction);
});
});
</script>
</body>
</html>
