How would you set the position:relative property in an element that does not have an initial position property set, within jQuery's animate()?
This does not work:
$(mLinks[id]).animate
(
{
position:'relative',
left:'200px'
}
);
Given that mLinks is a valid DOM element object.
I also tried with the duration and callback parameters.
How would you set the position:relative property in an element that does not have an initial position property set, within jQuery's animate()?
This does not work:
$(mLinks[id]).animate
(
{
position:'relative',
left:'200px'
}
);
Given that mLinks is a valid DOM element object.
I also tried with the duration and callback parameters.
3 Answers
Reset to default 6It does not make sense to "animate" the css position attribute isn't it? There is nothing between relative and absolute or static or anything like that...
This is what I would do:
$(mLinks[id]).css('position', 'relative').animate
(
{
left:'200px'
}
);
If you read the corresponding jQuery doc, you will find this:
most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used).
The animate method don't let you to set css attributes and this make sense, although to have a great animation you must set correctly the css attributes, these are two different things.
So first you should set the css attribute. And you should use css method:
$(mLinks[id]).css("position", "relative")
After you can start with the animation:
$(mLinks[id]).animate({ left:'200px' });
Combining all together you'll have:
$(mLinks[id]).css("position", "relative").animate({ left:'200px' });
take a look at this code.
<html>
<head>
<title>Hello there</title>
<script type="text/javascript" src = "assets/js/jquery.min.js"></script>
</head>
<body>
<div class="tobechanged" style = "background:#ddd;position:fixed;">
hello there.
</div>
<script type="text/javascript">
$('.tobechanged').css('position','relative').animate({
opacity: 0.9,
left: '+=50'},
4000, function() {
//some stuff here.
});
</script>
</body>
</html>
This now should work just fine.