jquery淡入淡出_使用jQuery淡入淡出链接：dwFadingLinks

不念不忘少年蓝@ 2023-02-22 01:27 70阅读 0赞

jquery淡入淡出

*UPDATE: The jQuery website was down today which caused some issues with my example. I've made everything local and now the example works.*

*更新：jQuery网站今天关闭，这导致我的示例出现了一些问题。* *我已经将所有内容都本地化了，现在该示例起作用了。*

Earlier this week, I posted a MooTools script that faded links to and from a color during the mouseover and mouseout events. My thought was "why do a harsh a:hover color change when you can fade to that color?" Here's how to implement link color fading using jQuery.

本周早些时候，我发布了一个MooTools脚本，该脚本在mouseover和mouseout事件期间淡化了与颜色之间的链接。 我的想法是“为什么当您可以淡入淡出的颜色时，它会剧烈改变颜色？” 这是使用jQuery实现链接颜色淡入的方法。

[View Demo][] [查看演示][View Demo] [Download][] [下载][Download]

## jQuery JavaScript-插件和用法 **(**The jQuery JavaScript - Plugin & Usage**)** ##

/* plugin */
    jQuery.fn.dwFadingLinks = function(settings) {
    	settings = jQuery.extend({
    		color: '#ff8c00',
    		duration: 500
    	}, settings);
    	return this.each(function() {
    		var original = $(this).css('color');
    		$(this).mouseover(function() { $(this).animate({ color: settings.color },settings.duration); });
    		$(this).mouseout(function() { $(this).animate({ color: original },settings.duration); });
    	});
    };
    
    /* usage */
    $(document).ready(function() {
    	$('.fade').dwFadingLinks({
    		color: '#008000',
    		duration: 700
    	});
    });

[View Demo][] [查看演示][View Demo] [Download][] [下载][Download]

> 翻译自: [https://davidwalsh.name/fading-links-jquery-dwfadinglinks][https_davidwalsh.name_fading-links-jquery-dwfadinglinks]

jquery淡入淡出

[View Demo]: https://davidwalsh.name/demo/fading-links-jquery.php
[Download]: https://davidwalsh.name/demo/jquery.dwFadingLinks.js
[https_davidwalsh.name_fading-links-jquery-dwfadinglinks]: https://davidwalsh.name/fading-links-jquery-dwfadinglinks