문제

http://mmowned.org/dragon/slm/menu9.html

기존 버전 (Menu7.html)에서 애니메이션 Queing을 해결하기 위해 드롭 다운 메뉴에서 .stop ()를 사용해 보았습니다. 문제는 드롭 다운을 반쯤 "정지"한 다음 다시 시작할 때 메뉴를 깨고 중지 된 위치로 다시 연장됩니다.

나는 이것이 정말로 간단하다고 확신하지만 어떻게 이것을 고칠 수 있습니까?

$(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);  
};

슬라이드 함수는 내가 원하는 방식으로 작동하지만 드롭 다운은 (앞서 언급 한대로 깨지지 않음) 어떤 이유로 든 내 토글 크라스가 작동하지 않지만 (이전 버전에 있습니다).

도움이 되었습니까?

해결책

당신은 사용합니다 toggle 가치 height 매개 변수.
또한 사용자가 다시 클릭하여 애니메이션을 방해 할 수 있습니다 ( .stop() 부분).

애니메이션 중에 나는 그것을 방해한다면 (높이의 50%라고 말하면) 다음 전화에서 내 애니메이션은 50%에서 0으로 갈 것입니다. 다음은 0에서 50%로 이동합니다.

문서를 중지하십시오 대기열을 지우거나 애니메이션의 끝을 얻기 위해 Wether를 지정할 수 있다고 지적합니다. 이것들은 당신의 경우입니다.

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

두 사람을 주목하십시오 true 정지에 추가 된 값. 이것은 작동해야합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top