여러 개의 동시 jQuery 효과

웹 응용 프로그램에 멋진 UI를 적용하려는 경우, 아래로 슬라이드하고 페이드 인하거나 동시에 위로 이동하고 페이드 아웃하는 메뉴를 원합니다.여러 개의 동시 jQuery 효과

이것을 시도했습니다 ...

if($('#Menu').css("display") == "none") { 
    $('#Menu').slideDown(250).fadeIn(250); 
} else { 
    $('#Menu').slideUp(250).fadeOut(250); 
}

... 작동하지 않았습니다. 하나의 효과 만 발생합니다 ...이 방법으로 효과를 연결하는 것이 가능한지 아무에게도 설명하거나 해결 방법을 제안 할 수 있습니까?

출처

2012-11-27 series0ne

그것은 가능하지만, 오히려 slideDown 및 fadeIn보다 .animate 방법으로해야 해. 현재 일어나고있는 것은 하나의 효과가 발생하고, 다음은 jQuery UI가 애니메이션 대기열 시스템을 사용하기 때문에 발생합니다. 요소 당 한 번에 하나의 큐 항목 만 실행됩니다. –

이것을 달성하려면 jQuery의 .animate() 기능을 사용하는 것이 좋습니다. 이 같은;

if ($('#Menu').css('opacity') == 1) { 
    $('#Menu').animate({ 
     opacity: 0, 
     height: '0' 
    }, 500, function() { 
     // animation complete 
    }); 
} else { 
    $('#Menu').animate({ 
     opacity: 1, 
     height: '200px' 
    }, 500, function() { 
     // animation complete 
    }); 
}

특정 값을 넣지 않으려면 높이 값을 '토글'로 바꿀 수 있다고 생각합니다. 그러나 나는 그것을 개인적으로 사용하지 않았기 때문에 확신 할 수 없다.

편집 : '토글'잘 작동하는 것 같다 : http://jsfiddle.net/RjESG/3/

출처

2012-11-27 15:09:39 Novocaine

여러 개의 동시 jQuery 효과

답변

관련 문제