2009-11-09 4 views
1

http://mmowned.org/dragon/slm/menu9.htmlJquery는 내 드롭 다운을 깨지 않고 반복 애니메이션을 방지합니까?

이전 버전 (menu7.html)의 애니메이션 큐잉을 해결하기 위해 드롭 다운 메뉴에서 .stop()을 사용해 보았습니다. 드롭 다운을 "중지"한 다음 다시 시작하면 메뉴가 깨져서 중단 된 부분으로 만 확장됩니다./

정말 간단하지만 어떻게 할 수 있습니까? 이것을 고쳐라? (앞서 언급 한 바와 같이 나누기)와 몇 가지 이유로 내 toggleclass 중 하나를 작동하지 않습니다 (그러나

$(document).ready(function() { 
    var nid=["bottom","nav","news","wow","emu","war","aoc","diablo","prog","trade"]; 
    $('li.navhead2').click(function() { 
    var id = $(this).attr('id') 
    var query = jQuery.inArray(id, nid) 
    if (query !== -1 && query !== 0) 
    { 
     $("#menu"+query).slideFadeToggle('slow'); 
     if (query !== 1 && query !== 0) 
     { 
     $(this).toggleClass("clicked"); 
     } 
     else 
     { 
     $(this).toggleClass("clicked1"); 
     } 
    } 
    else if (query === 0) 
    { 
    $("[id^=menu]").not("#menu1").slideUp('fast'); 
    $("li.navhead2").removeClass("clicked"); 
    } 
    }); 
slide("#sliding-navigation", 160, 182, 150, .8); 
    }); 

jQuery.fn.slideFadeToggle = function(speed, easing, callback) { 
    return this.stop().animate({opacity: 'toggle', height: 'toggle', queue:false}, speed, easing, callback); 
}; 

슬라이드 기능은 I가 원하는 방법을 작동하지만 드롭하지 않는 그것은이다

+0

어떻게 태핑을 수정 했습니까? 나는 모든 것을 4spaced했고 그것은 작동하지 않았다 : ( – Dragonshadow

+0

난 그냥 모든 그것을 선택하고 코드 단추를 누르십시오 (4 - 공백). 코드 단추를 그것에 1s 및 0 함께 하나입니다. – Greg

답변

2

height 매개 변수에 toggle 값을 사용합니다.
사용자가 다시 애니메이션을 클릭하여 애니메이션을 중단하도록 허용 할 수도 있습니다 (.stop() 부분).

애니메이션을 중단 할 때 (높이 50 %로 가정) 다음 호출에서 애니메이션이 50 %에서 0으로 이동합니다. 다음 번에는 0에서 50 %로 이동합니다.

Stop documentation은 큐를 지우거나 애니메이션의 끝으로 이동하도록 지정할 수 있다고 지적합니다. 이것들이 당신의 경우입니다.

jQuery.fn.slideFadeToggle = function(speed, easing, callback) { 
    return this.stop(true,true).animate({opacity: 'toggle', height: 'toggle', queue:false}, speed, easing, callback); 
}; 

두 개의 true 값이 정지 지점에 추가됩니다. 이것은 효과가있다.

+0

Ahhh 감사합니다 :) 그것이 간단한 일이 될 줄 알았습니다 : / – Dragonshadow