動畫jquery飛出菜單

我想讓我的JQuery菜單有一個簡單的動畫，當用戶點擊鏈接。我有一個箭頭指向點擊鏈接，但是我希望箭頭在點擊之間進行動畫處理。如果用戶點擊鏈接1，則箭頭向右滑動，如果用戶點擊鏈接2，則箭頭向左滑動。我知道我可以使用「.animate」。但是我一直無法得到這個工作。動畫jquery飛出菜單

HTML/CSS

<!doctype html> 

<html> 
<head> 
<title>Demo</title> 

<meta http-equiv="X-UA-Compatible" content="chrome-1"> 
<meta name="viewport" content="width=1240"> 

<style type="text/css"> 
#flyout 
{ margin: 0; 
    padding: 0} 

    #flyout li 
    { float: left; 
     list-style: none; 
     font: 12px Tahoma, Arial} 

    #flyout li a 
    { display: block; 
     background: #20548E; 
     padding: 5px 12px; 
     text-decoration: none; 
     border-right: 1px solid white; 
     width: 80px; 
     color: #EAFFED; 
     white-space: nowrap} 

    #flyout li a:hover 
    { background: #1A4473} 

     #flyout li ul 
     { margin: 0; 
      padding: 0; 
      position: absolute; 
      left: 8px; 
      display: none; 
      padding-top: 10px; 
      border-top: 1px solid white} 

     #flyout li ul li 
     { float: none; 
      display: inline;} 

     #flyout li ul li a 
     { width: auto; 
      background: #9F1B1B; 
      width: 400px;} 

     #flyout li ul li a:hover 
     { background: #7F1616} 
</style> 
</head> 
<body> 
<img class="arrow" src="img/arr.png" alt="arrow" style="position:absolute; top:32px; display:none;"> 
<ul id="flyout"> 
    <li class="me a"><a href="#">Link 1</a> 
     <ul class="ul_a"> 
      <li><a href="#">Sub A</a></li> 
      <li><a href="#">Sub B</a></li> 
      <li><a href="#">Sub C</a></li> 
     </ul> 
    </li> 
    <li class="me b"><a href="#">Link 2</a> 
     <ul class="ul_b"> 
      <li><a href="#">Sub D</a></li> 
      <li><a href="#">Sub E</a></li> 
      <li><a href="#">Sub F</a></li> 
     </ul> 
    </li> 
</ul>

JQuery的

(function(){ 

var closetimer = 0; 
var menuitem = 0; 
var arrow = $('.arrow'); 

function animate_right() { 
    var ele = $('.a'); 
    var pos = ele.offset(); 
    var left = pos.left; 
    var total = left+48; 
    arrow.show().css('left', total); 
} 

function animate_left() { 
    var ele = $('.b'); 
    var pos = ele.offset(); 
    var left = pos.left; 
    var total = left+48; 
    arrow.show().css('left', total); 
} 

function arrow_hide() { 
    arrow.hide() 
} 

function flyout_open(event) 
{ 
    flyout_close(); 
    var submenu = $(this).find('ul'); 
    menuitem = submenu.fadeIn(200); 
    if(submenu.hasClass('ul_a')){ 
     animate_right(); 

     return false; 

    } else if (submenu.hasClass('ul_b')) { 
     animate_left(); 

     return false; 
    } 

    return true; 
} 

function flyout_close() 
{ arrow_hide(); if(menuitem) menuitem.fadeOut(200);} 

$(document).ready(function() 
{ $('#flyout li').bind('click', flyout_open); 
}); 

(document).onclick = flyout_close; 


})();

來源

2012-07-30 Eric

動畫正常工作： http://jsfiddle.net/N8Zwr/ – kei 2012-07-30 16:31:22

謝謝，工作很好。我更新爲[this]（http://jsfiddle.net/gmMb9/）。你認爲你可以幫助我嗎？當用戶從彈出窗口中單擊時，箭頭也會消失，當用戶單擊以從鏈接打開菜單時，將按下相同的鏈接。彈出窗口關閉。我真的很感激它。謝謝 – Eric 2012-07-30 16:55:21

[JQuery彈出菜單指針]的可能重複（http://stackoverflow.com/questions/11723983/jquery-flyout-menu-pointer） – 2012-07-31 17:30:49

你可能要更改#flyout位置相對：

#flyout{ 
    position : relative; 
}

來源

2012-07-30 16:37:21

動畫jquery飛出菜單

回答

相關問題