애니메이션 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

감사합니다. [this] (http://jsfiddle.net/gmMb9/)로 업데이트되었습니다. 사용자가 나를 도울 수 있다고 생각하십니까? 사용자가 플라이 아웃을 클릭하면 화살표도 사라지고 링크에서 메뉴를 열 때 클릭 한 다음 동일한 링크를 누릅니다. 플라이 아웃이 닫힙니다. 나는 정말로 감사 할 것입니다. 감사합니다 – Eric

[JQuery 플라이 아웃 메뉴 포인터] 가능한 중복 (http://stackoverflow.com/questions/11723983/jquery-flyout-menu-pointer) –

당신은 상대에 #flyout 위치를 변경할 수 있습니다 :

#flyout{ 
    position : relative; 
}

출처

2012-07-30 16:37:21

애니메이션 Jquery 플라이 아웃 메뉴

답변

관련 문제