jQuery : slideDown jump

다음과 같은 기능이 있습니다. jQuery : slideDown jump

function notificationBoxOutput(type, message) { 
    if (type == "success") { $('.notificationBox').removeClass('warning').addClass('success'); } 
    if (type == "warning") { $('.notificationBox').removeClass('success').addClass('warning'); } 
    $('.notificationBox').html('<b>' + type + ':</b>&nbsp;' + message); 
    $('.notificationBox').slideDown().delay(3000).slideUp(); 
}

다음과 같은 CSS 기능이 정상에서 notificationBox해야 slideDown을 해고 그래서

div.notificationBox 
{ 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    position: fixed; 
    z-index: 3; 
    background: #333333; 
    text-align: center; 
    vertical-align: center; 
    opacity:0.85; 
    filter:alpha(opacity=85); 
    display: none; 
} 

div.warning { background-color: #990000; display: block; } 
div.success { background: #009900; display: block; }

는 그 메시지 3secs slideUp 후 다시을 보여줍니다.

slideUp 만 애니메이션으로 잘 작동하지만 slideDown이 애니메이션없이 점프하는 이유는 무엇입니까?

출처

2011-07-26 matt

이것은 오프 토픽이지만 : *** *** ($. 'notificationBox')'를 할 때마다 jQuery는 DOM을 위에서 아래로 검색해야한다. 함수를 반복적으로 호출하는 것이 아니라 * 한 번 호출 *하여 결과를 변수에 저장하고이를 사용합니다. –

내 대답 – avall

문제는 CSS입니다. success 및 warning 클래스에서 display:block 선언을 제거하면 올바르게 작동합니다.

출처

2011-07-26 06:56:39 avall

에 한번이와 JQuery와의 마지막 줄을 교체 ...

$('.notificationBox').slideDown(function() { 
    $('.notificationBox').delay(3000).slideUp(); 
});

출처

2011-07-26 06:48:54 Tom

편집이 경우 여전히 점프 있지만 전혀 위로 슬라이드 않습니다. – matt

은 문제가되지 않습니다. http://jsfiddle.net/NnY35/ (편집 : 그냥 받아 들여진 답변을 보았습니다 ... 이것이 왜 작동할까요?) – Tom

당신이 .success 및 .warning 클래스에서 display:block을 제거하고, 그 처리 JQuery와하게되면 그대로 그것은 작동합니다 .. http://jsfiddle.net/gaby/Qznrk/3/
(변경된 코드가 통지에 대한 참조를 저장하는

예에서와 그것을 사용하고 함께 몇 가지 방법을 ..)

출처

2011-07-26 07:07:32

나는 당신에게 코드를 시도했다. notificationBoxOutput 함수를 호출하는 두 개의 버튼을 추가했습니다.

<html><head> 
<script language="javascript" src="jquery-1.6.1.min.js"></script> 
<script type="text/javascript"> 
function notificationBoxOutput(type, message) { 
    if (type == "success") { 
     $('.notificationBox').removeClass('warning').addClass('success'); } 
    if (type == "warning") { 
     $('.notificationBox').removeClass('success').addClass('warning'); } 
    $('.notificationBox').html('<b>' + type + ':</b>&nbsp;' + message); 
    $('.notificationBox').slideDown().delay(3000).slideUp(); 
} 
</script> 
<style> 
div.notificationBox 
{ 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    position: fixed; 
    z-index: 3; 
    background: #333333; 
    text-align: center; 
    vertical-align: center; 
    opacity:0.85; 
    filter:alpha(opacity=85); 
    display: none; 
} 

div.warning { background-color: #990000; display: block; } 
div.success { background: #009900; display: block; } 
</style> 
</head><body> 
    <div class="notificationBox">Hi</div> 
    <button onclick='notificationBoxOutput("success","success")' >success</button> 
    <button onclick='notificationBoxOutput("warning","warning")' >warning</button> 
</body></html>

나는 성공 버튼을 먼저 클릭 한 다음 경고 버튼을 3000 ms 전에 클릭해야만 jumpping 문제가 발생하는 것으로 나타났습니다. 이것은 경고 버튼을 먼저 클릭하고 성공 버튼을 3 초 이내에 클릭 할 때도 발생합니다.

이 문제가

$('.notificationBox').hide();

또한 http://jqueryfordesigners.com/slidedown-animation-jump-revisited/를 방문() 에 notificationBoxOutput을 유형을 확인하기 전에이 코드를 추가 해결합니다. JQuery에는 버그가 있습니다. 이 링크는 도움이 될 수 있습니다.

출처

2011-07-26 07:52:24

jQuery : slideDown jump

답변

관련 문제