jQuery(document).ready(function($){ var borderS = 2; var borderL = 4; var minW = 50; var maxW = 100; var minH = minW; var maxH = maxW; var speed = 500; // optional easing parameter can be added to each call to animate() e.g. animate({ marginTop: 52 }, speed, wayfinderEasing) // this will require the additional reference to jQueryUI in the //var wayfinderEasing = "easeInOutExpo"; //var captionEasing = "easeInOutSine"; $("#wayfinder-caption").css("opacity", 0); $("li.item").hover( function(){ var tMargin; var thisId = $(this).attr("id"); if (thisId == "wayfinder3" || thisId == "wayfinder4" || thisId == "wayfinder5") { $(this).parent().children().animate({ marginTop: 52 }, speed).dequeue(); } else { $(this).parent().children().animate({ marginTop: 0 }, speed).dequeue(); } $(this).animate({ width: maxW, height: maxH, marginTop: 0, borderBottomWidth: borderL }, speed).dequeue(); $("#wayfinder-caption").html($(this).attr("title")) .css("color", $(this).css("border-bottom-color")) .animate({ opacity: 1}, speed/3).dequeue(); }, function(){ $(this).animate({ width: minW, height: minH, marginTop: 0, borderBottomWidth: borderS }, speed).dequeue(); $(this).parent().children().animate({ marginTop: 0 }, speed).dequeue(); $("#wayfinder-caption").animate({ opacity: 0}, speed/3).dequeue(); } ); });