これはstackoverflowでの私の最初の返信であり、あなたからの同意を期待しています、ありがとう〜
jquery UIエフェクトに基づいてさらに2つのエフェクトを追加しました。それらは、slideFadeinとslideFadeoutです。名前からエフェクトがどのようなものかをイメージできます。スライドとフェードイン/フェードアウトを同時に行います。使用法は他の効果とまったく同じです。
//this will slide up and fade out the element
$("#effect").effect("slideFadein",{},500);
//this will remove the element after effect end
$("#effect").effect("slideFadein",{mode:'remove'},duration);
jquery UI効果:jqueryui.com/effect
jsFiddle:jsfiddle.net/rw42S
以下のコードをjavascriptファイルに保存し、jquery.ui.jsの後に含めるか、jquery.ui.jsに貼り付けることで、これら2つの効果を使用できます。
これが私のコードです:
(function( $, undefined ) {
$.effects.effect.slideFadeout = function(o,done){
// create element
var el = $( this ),
props = [ "width" , "height" , "opacity"],
speed = o.duration || 500,
// 'hide' or 'remove'
mode = o.mode || 'hide',
animation,wrapper;
// save properties
$.effects.save( el, props );
animation = {
height: "0px",
opacity: "0"
};
// create wrapper
wrapper = $.effects.createWrapper( el ).css({
overflow: "hidden"
});
// animate
wrapper.animate(animation,speed,'swing',function(){
if(el[mode]) el[mode]();
// restore properties
if(mode == 'hide') $.effects.restore( el, props );
// remove wrapper
$.effects.removeWrapper( el );
// callback
done();
});
};
$.effects.effect.slideFadein = function(o,done){
// create element
var el = $( this ),
speed = o.duration || 5000,
props = [ "height" , "opacity"],
animation,wrapper;
animation = {
height: el.outerHeight(true) + "px",
opacity: "1"
};
// save properties
$.effects.save( el, props );
// show element to get correct width(if the element has no width)
el.css({ height: "0px" }).show();
// create wrapper
wrapper = $.effects.createWrapper( el ).css({
overflow: "hidden",
opacity: "0",
height: "0px"
});
// restore properties
$.effects.restore( el, props );
// animate
wrapper.animate(animation,speed,'swing',function(){
// remove wrapper
$.effects.removeWrapper( el );
// callback
done();
});
};
})(jQuery);