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}
});
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}
});