I'm facing an issue with my menu animation using jQuery. In order to achieve the desired effect, I am forced to use position: absolute. My challenge is maintaining consistent spacing between each text string, especially since they vary in width. Unfortunately, using the jQuery width function has not yielded satisfactory results. Is there a more effective approach I can take?
$(document).ready(function () {
$(".menuitem").css('margin-left', -80);
var url = window.location;
$('.menulink').filter(function () {
return this.href == url;
}).removeClass('menulink');
//$(".menuitem").animate({marginLeft: "20px"}, 2000);
var number = (".menuitem").length;
var px = number * 40 + 60;
$($(".menuitem").get().reverse()).each(function (i, e) {
$(this).delay(i * 200).animate({
left: px
}, 1000, 'linear');
px = px - 80;
});
});