CODEWITHSUNDEEP
jqueryjquery-animate
Andycap
Andycap

Reputation: 525

Jquery animate width from left to right

I am trying to animate menu elements shrinking the width from 170 to 150px on mouseover. My problem is, with the default .animate shrinking happens on the right side of my rectangle, I need it to shrink on the left side. I have already tried animating left margin, but since I have text inside the element, it shifts on the right during the animation.

This is the actual code I'm using 

$(document).ready(function(){  

//When mouse rolls over  
$("#navigation li").mouseover(function(){  
    $(this).stop().animate({marginLeft:'20'},{queue:false, duration:600, easing: 'easeOutBounce'}) 

});  

//When mouse is removed  
$("#navigation li").mouseout(function(){  
    $(this).stop().animate({marginLeft:'0'},{queue:false, duration:600, easing: 'easeOutBounce'})  
});  


});

I had found some other answers to this, but I didn't understand the proposed solution.

Upvotes: 2

Views: 9291

Answers (2)

Josiah Ruddell
Josiah Ruddell

Reputation: 29841

You can easily control this with css positioning. Either with floats or with an inner container that is positioned either left, or right (relative, or absolute).

Upvotes: 0

mattsven
mattsven

Reputation: 23303

This is the default behavior. The only way to change this is via CSS

#navigation li {
float: right; //Sometimes using float funks things up so...
}

or changing the CSS of the parent and the child li (better solution) 

#navigation_li's_parent {
text-align: right;
}

#navigation li {
display: inline-block;
}

Upvotes: 4

Related Questions