페이드 아웃 설명서

Question

$('<div class="error"></div>').html('<h2>(click here to dismiss)</h2>').insertAfter($('#someid')).fadeIn('slow').animate({ opacity: 1.0 }, 1000).click(function() { 
     $(this).fadeOut('slow', function() { 
      $(this).remove() 
     }) 
    }); 

로 이것을 결합하는 방법이있다 : 즉

$('#someid').animate({opactiy: 1.0 } fadeOut('slow', function() { 
      $(this).remove() 
     }); 

가 결합하는 그래서 그들은 그것을 클릭하지 않는 경우, , 많은 시간이 지나면 여전히 사라질 것입니다.

Answer 1

모든 것을 하나로 묶어서 하나의 명령으로 처리 할 수있는 좋은 방법이 있는지 확실하지 않습니다. 그러나 다른 행에서 setTimeout을 사용하여 다른 명령문에서 동일한 효과를 얻을 수 있습니다. 예를 들어, 첫 번째 문 다음 :

setTimeout(function() { 
    if ($('#someid').css('opacity') == 1.0) { 
     // Fade out has not started yet 
     $('#someid').animate({opactiy: 1.0 } fadeOut('slow', function() { 
      $(this).remove() 
     }); 
    } 
}, 3000); // setTimeout counted in ms, not seconds 

나는 함께 체인 모든 것에 더 우아 할 수 있음을 동의하지만, 나는 그렇게 할 수있는 좋은 방법을 알고 아니에요.

부수적으로, 자바 스크립트의 메소드 이름 사이에 원하는만큼의 공백을 둘 수 있으므로 가독성을 높이기 위해 원본 문장을 여러 줄로 나눌 수 있습니다.

$('<div class="error"></div>') 
    .html('<h2>(click here to dismiss)</h2>') 
    .insertAfter($('#someid')) 
    .fadeIn('slow') 
    .animate({ opacity: 1.0 }, 1000) 
    .click(function() { 
    $(this).fadeOut('slow', function() { 
     $(this).remove() 
    }) 

});

하지만 이는 중요한 문제입니다.