jQuery를 사용하여 요소를 페이드 아웃하기 전에 어떻게 일시 중지합니까?

StackOverflow https://stackoverflow.com/questions/42254

  •  09-06-2019
  •  | 
  •  

문제

내 페이지에 성공 메시지를 표시하고 싶습니다.

나는 jQuery를 사용하고 있습니다 fadeOut 요소를 페이드한 다음 제거하는 방법입니다.지속 시간을 늘려서 더 오래 지속되도록 할 수 있지만 이상하게 보입니다.

내가 원하는 것은 요소가 5초 동안 표시된 다음 빠르게 사라지고 마지막으로 제거되는 것입니다.

jQuery를 사용하여 어떻게 애니메이션을 적용할 수 있나요?

도움이 되었습니까?

해결책

새로운 delay() jQuery 1.4의 함수가 그 트릭을 수행해야 합니다.

$('#foo').fadeIn(200).delay(5000).fadeOut(200).remove();

다른 팁

사용 setTimeout(function(){$elem.hide();}, 5000);

어디 $elem 숨기려는 요소입니다. 5000 밀리초 단위의 지연입니다.실제로 호출 내에서 어떤 함수든 사용할 수 있습니다. setTimeout(), 해당 코드는 단순성을 위해 작은 익명 함수를 정의합니다.

@John Sheehan의 접근 방식이 작동하는 동안 다음과 같은 문제가 발생합니다. jQuery fadeIn/fadeOut ClearType 결함 IE7에서는.개인적으로 저는 @John Millikin의 것을 선택하겠습니다. setTimeout() 그러나 순수한 jQuery 접근 방식을 설정한 경우 여백과 같은 불투명하지 않은 속성에서 애니메이션을 트리거하는 것이 더 좋습니다.

var left = parseInt($('#element').css('marginLeft'));
$('#element')
    .animate({ marginLeft: left ? left : 0 }, 5000)
    .fadeOut('fast');

마진이 고정된 값이라는 것을 알면 좀 더 깔끔해질 수 있습니다.

$('#element')
    .animate({ marginLeft: 0 }, 5000)
    .fadeOut('fast');

편집하다:그것은 다음과 같습니다 jQuery FxQueues 플러그인 필요한 작업을 수행합니다.

$('#element').fadeOut({
    speed: 'fast',
    preDelay: 5000
});

순수한 jQuery 접근 방식의 경우 다음을 수행할 수 있습니다.

$("#element").animate({opacity: 1.0}, 5000).fadeOut();

해킹이지만 작업을 수행합니다.

var $msg = $('#msg-container-id');
$msg.fadeIn(function(){
  setTimeout(function(){
    $msg.fadeOut(function(){
      $msg.remove();
    });
  },5000);
});

dansays의 의견에 따르면 다음은 완벽하게 잘 작동하는 것 같습니다.

$('#thing') .animate({dummy:1}, 2000) .animate({ etc ... });

1.6.2 업데이트

Nathan Long의 답변으로 인해 지연이나 지연을 따르지 않고 요소가 튀어나오게 됩니다. fadeOut.

이것은 작동합니다:

$('#foo').delay(2000).fadeOut(2000);

dansays의 대답은 나에게 효과가 없습니다.몇 가지 이유, remove() 즉시 실행되고 애니메이션이 발생하기 전에 div가 사라집니다.

그러나 다음은 작동합니다( remove() 방법):

$('#foo').fadeIn(500).delay(5000).fadeOut(500);

페이지에 숨겨진 DIV가 있어도 상관 없습니다(어쨌든 몇 개 이상 있으면 안 됩니다).

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