1. 程式人生 > >jquery動態滑塊選單

jquery動態滑塊選單

$(function(){ var $current_nav = $("#current_nav"); //current元素(當前所在導航項) var current_nav_width = $current_nav.innerWidth(); var current_nav_left = $current_nav.position().left; var $nav_animate_block = $("#nav_animate_block"); //動畫滑塊 $nav_animate_block.css({ width:current_nav_width, left:current_nav_left }); //初始狀態下,動畫滑塊位置在current元素
// 滑鼠進入a元素時觸發動畫事件 $("#nav_menu a").hover(function(){ var index = $(this).index(); var $a_cur = $("#nav_menu").find("a").eq(index);//滑鼠移動到的a元素 //利用觸發的a元素索引獲取其left位置和它的寬度 var width = $a_cur.innerWidth(); var left = $a_cur.position().left; //設定動畫滑塊位置 $nav_animate_block.stop().animate({ width: width, left: left }, 300
) }, function(){ //滑鼠離開a元素時,動畫滑塊返回current元素位置 $nav_animate_block.stop().animate({ width: current_nav_width, left: current_nav_left }) }) });