jquery上移下移插件_jQuery链接微移插件

我会带着你远行 2023-02-21 15:26 82阅读 0赞

jquery上移下移插件

A while back I debuted a tasteful mouseover/mouseout technique called link nudging. It started with a [MooTools version][] and shortly thereafter a [jQuery version][]. Just recently Drew Douglass premiered a [jQuery plugin][] that aimed at producing the same type of effect. I've taken some time to put together my own version of the jQuery nudging plugin.

不久前，我推出了一种称为链接轻推的高雅鼠标悬停/鼠标悬停技术。 它以[MooTools版本][MooTools version]开始，此后不久是[jQuery版本][jQuery version] 。 就在最近，Drew Douglass首次发布了一个[jQuery插件][jQuery plugin] ，旨在产生相同类型的效果。 我花了一些时间整理自己的jQuery nudging插件版本。

[View Demo][] [观看演示][View Demo]

## jQuery JavaScript **(**The jQuery JavaScript**)** ##

//Define the plugin
    $.fn.nudge = function(params) {
    	//set default parameters
    	params = $.extend({
    		amount: 20,				//amount of pixels to pad / marginize
    		duration: 300,			//amount of milliseconds to take
    		property: 'padding', 	//the property to animate (could also use margin)
    		direction: 'left',		//direction to animate (could also use right)
    		toCallback: function() {},	//function to execute when MO animation completes
    		fromCallback: function() {}	//function to execute when MOut animation completes
    	}, params);
    	//For every element meant to nudge...
    	this.each(function() {
    		//variables
    		var $t = $(this);
    		var $p = params;
    		var dir = $p.direction;
    		var prop = $p.property + dir.substring(0,1).toUpperCase() + dir.substring(1,dir.length);
    		var initialValue = $t.css(prop);
    		/* fx */
    		var go = {}; go[prop] = parseInt($p.amount) + parseInt(initialValue);
    		var bk = {}; bk[prop] = initialValue;
    		
    		//Proceed to nudge on hover
    		$t.hover(function() {
    					$t.stop().animate(go, $p.duration, '', $p.toCallback);
    				}, function() {
    					$t.stop().animate(bk, $p.duration, '', $p.fromCallback);
    				});
    	});
    	return this;
    };
    
    /* usages */
    $(document).ready(function() {
    	/* usage 1 */
    	$('#nudgeUs li a').nudge();
    	/* usage 2 */
    	$('#nudgeUs2 li a').nudge({
    		property: 'margin',
    		direction: 'left',
    		amount: 30,
    		duration: 400,
    		toCallback: function() { $(this).css('color','#f00'); },
    		fromCallback: function() { $(this).css('color','#000'); }
    	});
    });

I've made Drew's script a bit more flexible by allowing the developer to set the property and direction to animate the element to and from. This plugin also detects the animated property's original settings so the developer doesn't need to set it. For kicks I also allow the developer to set the animate callback in case the developer wants to do some really creative stuff. My plugin is a bit larger in size but the extra file size enhances the plugin's worth.

通过允许开发人员设置属性和方向来使元素来回动画，我使Drew的脚本更加灵活。 该插件还检测动画属性的原始设置，因此开发人员无需进行设置。 对于踢球，我还允许开发人员设置动画回调，以防开发人员想要做一些真正有创意的事情。 我的插件尺寸较大，但是额外的文件大小增加了插件的价值。

[View Demo][] [观看演示][View Demo]

Have more ideas for the plugin? Share them!

对插件有更多想法吗？ 分享他们！

> 翻译自: [https://davidwalsh.name/jquery-link-nudge][https_davidwalsh.name_jquery-link-nudge]

jquery上移下移插件

[MooTools version]: https://davidwalsh.name/mootools-link-nudging
[jQuery version]: https://davidwalsh.name/jquery-link-nudging
[jQuery plugin]: http://dev-tips.com/featured/link-nudge-jquery-plugin
[View Demo]: https://davidwalsh.name/demo/jquery-link-nudge-plugin.php
[https_davidwalsh.name_jquery-link-nudge]: https://davidwalsh.name/jquery-link-nudge