jquery動態滑塊選單
阿新 • • 發佈:2019-01-05
$(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
})
})
});