봉 블로그

jQuery Dialog fade 효과 주기. 본문

ajax_js

jQuery Dialog fade 효과 주기.

idkbj 2010. 9. 3. 10:06
이상하게 jquery ui 1.8.2 에서 dialog 의 fade 효과가 안된다.
http://dev.jqueryui.com/ticket/4416 에 의하면 1.7.2 에 이미 적용되었다고 나오는데, 왜 안되는지 모르겠다.

따라서 아래와 같이 작업해주면 fade 효과를 적용할수 있다. ^^
원본 : http://old.nabble.com/Dialog-Fade-effect-td22756114s27240.html

1. 아래 script 를  "effects.fade.js" 로 저장합니다.

------------------
/*
 * jQuery UI fade effect, based on pulsate
 *
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 * Depends:
 * effects.core.js
 */
(function($) {

$.effects.fade = function(o) {

        return this.queue(function() {

                // Create element
                var el = $(this);

                // Set options
                var speed = o.options.speed || 230;
                var mode = o.options.mode || 'show'; // Set Mode

                // Animate
                if (mode == 'show') {
                        el.fadeIn(speed);
                } else {
                        el.fadeOut(speed);
                };
                el.queue('fx', function() { el.dequeue(); });
                el.dequeue();
        });
};

})(jQuery);

2.  header에 위에서 만든 스크립트 파일을 추가합니다.
<script type="text/javascript" src="js/effects.fade.js"></script>


3. 다음과 같이 사용하세요.
$("#thedialog").dialog({
        show: 'fade',
        hide: 'fade'
});

or

$("#thedialog").dialog({
        show: {effect:'fade', speed: 800},
        hide: {effect:'fade', speed: 800} 
});