본문 바로가기

Study/UI

[JQuery] 본문 내용 변화할 때 fade in & out 효과주기

        $.ajax({
type: "html",
url: "/main/" + __url,
success: function (data)
{
//기존 본문내용을 fadeOut 으로 사라지게 한 후 callback 함수를 열어준 후
$('#body_wrap').fadeOut(function ()
{
if (!$.trim(data))
$('#body_wrap').html('<p>공사중 입니다.</p>').fadeIn().focus();
else
//본문내용을 교체 후 fadeIn 으로 나타내게 하면 됩니다.
$('#body_wrap').html(data).fadeIn().focus();
main_menu_state_chg(this_menu, $('#main_menu'));
});
},
error: function (e)
{
$('#body_wrap').html("").append(e.responseText);
$('style', '#body_wrap').remove();
}
});

간단합니다. 주석 부분의 내용 참조 하시면 됩니다.




참조
시간 값은 숫자이며,
jQuery 가 기본적으로 가지고 있는 easing 표현은 swing 과linear 입니다.
  • .fadeOut( [duration] [, callback] )
  • duration 시간 값
  • callback 콜백 함수
  • .fadeOut( [duration] [, easing] [, callback] )
  • duration 시간 값
  • easing 특수한 효과 함수
  • callback 콜백 함수


'Study > UI' 카테고리의 다른 글

[html] tabindex 속성 초 간단 설명  (0) 2014.10.21
[css] 구글 폰트 적용하기  (0) 2014.10.21
[css] box-shadow 그림자 넣기  (0) 2014.10.01
[html] <a> 태그 링크 관련  (0) 2014.06.03
[css] css 연습1  (1) 2014.06.03
[bootstrap] 부트스트랩 자바스크립트  (0) 2014.05.12