Jquery UI effect 扩展效果: slideFade - 滑动同时淡入/淡出

最新推荐文章于 2024-01-11 09:18:58 发布

wuyang528378

最新推荐文章于 2024-01-11 09:18:58 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/wuyang528378/article/details/30248033

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

//向下滑动并淡入
$("#effect").effect("slideFadein");
$("#effect").effect("slideFadein",{},500);
//向上滑动并淡出,然后删除元素
$("#effect").effect("slideFadeout",{mode:'remove'},duration);

使用方法如上,和其它Jquery UI 的effect一样,不过多了一个功能就是可以选择是否在效果结束后删除元素:

mode:'remove' //默认值为hide

演示地址: jsfiddle.net/rw42S

Jquery UI effect 地址: jqueryui.com/effect

(链接如果无效请手动打开,没有http前缀)

使用方法:将代码插入jquery.ui.js文件中或者将代码另存然后在jquery.ui.js之后引用

具体代码如下:

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

以上代码为原创,允许在网络中任意传播,转载请注明原文链接.