使用 jQuery 实现颜色渐变菜单

大家好，我是 Liam Goodacre，Chris 让我写一篇关于如何实现渐变悬停效果的简短 jQuery 教程。我将演示如何执行颜色和图像混合。我们将使用 jQuery 和 jQuery 颜色插件。

当我第一次编写类似的东西时，我设置了一个背景 div，在鼠标悬停时淡入，在鼠标离开时淡出。我发现，如果我快速地将鼠标移入和移出链接，背景会闪烁与我的鼠标移动次数相同的次数。然后我告诉动画在设置新动画之前停止，这解决了问题，但又产生了一个新的问题。

新问题：如果我进行相同的测试（重复鼠标悬停），那么链接的鼠标离开状态会慢慢地看起来与悬停状态相同，因此背景在几次之后停止淡出。我注意到 Chris 的网站上也有同样的问题。

然后我有了个想法；在鼠标悬停时，如果我停止当前动画，并将背景重置为不可见，然后淡入，而不是从其当前状态开始淡入。这似乎解决了问题。

查看示例   下载文件

好的，让我们开始吧……

我们需要一个包含两件事的 div；一个锚元素和另一个 div，我将将其称为 subDiv。subDiv 将显示在鼠标悬停时淡入的图像。锚元素将覆盖 subDiv 并具有透明背景。

HTML 代码

我们将使用 jQuery 动态地将 subDiv 添加到 div 中，以减少我们需要编写的 html 代码量。当有多个这样的链接时，这很有帮助。

这是我们目前的 html 代码……

<div class="hoverBtn">
	<a href="https://css-tricks.org.cn/">Go to CSS-Tricks</a>
</div>

我们有一个类名为 hoverBtn 的 div，其中包含一个指向 CSS-Tricks 的链接。

CSS 代码

div.hoverBtn {
	position: 		relative;
	width: 			100px;
	height: 		30px;
	background:		#000 url(your_background_image.png) repeat-x 0 0 scroll;
}
div.hoverBtn a {
	position: 		relative;
	z-index: 		2;
	display: 		block;
	width: 			100px;
	height: 		30px;
	line-height: 		30px;
	text-align: 		center;
	color:			#000;
	background:		transparent none repeat-x 0 0 scroll;
}
div.hoverBtn div {
	display:		none;
	position: 		relative;
	z-index: 		1;
	width: 			100px;
	height: 		30px;
	margin-top: 		-30px;
	background:		#FFF url(your_hover_image.png) none repeat-x 0 0 scroll;
}

subDiv 现在位于锚元素下方，我已将背景图形应用于 div 和 subDiv。

JavaScript 代码

我将假设您对如何使用 jQuery 有基本的了解，尽管即使您没有，代码也几乎不言而喻。

这是我们的起点……

//when the dom has loaded
$(function(){
	
});

我相信你们大多数人都完全意识到，在这两行代码中编写的任何代码都将在 DOM 加载完成后立即运行。

现在我们需要添加 subDiv。我们可以使用 jQuery 对象的“append”方法来实现。

//when the dom has loaded
$(function(){
	//display the hover div
	$("div.hoverBtn").show("fast", function() {
		//append the background div
		$(this).append("<div></div>");
	});
});

我将“append”包装在 show 方法的回调中，以便我们可以使用“this”来引用每个 div.hoverBtn 元素。

现在我们需要编写链接的悬停事件代码。我们将使字体颜色淡入淡出，因此我们应该指定一个悬停颜色。我们还可以使用“rel”属性来存储每个锚元素的初始颜色。这对于不同颜色的链接很有用。

var hoverColour = "#FFF";
//when the dom has loaded
$(function(){
	//display the hover div
	$("div.hoverBtn").show("fast", function() {
		//append the background div
		$(this).append("<div></div>");
		//on link hover
		$(this).children("a").hover(function(){
			//store initial link colour
			if ($(this).attr("rel") == "") {
				$(this).attr("rel", $(this).css("color"));
			}
			//fade in the background
			$(this).parent().children("div")
				.stop()
				.css({"display": "none", "opacity": "1"})
				.fadeIn("fast");
			//fade the colour
			$(this)	.stop()
				.css({"color": $(this).attr("rel")})
				.animate({"color": hoverColour}, 350);
		},function(){
			//fade out the background
			$(this).parent().children("div")
				.stop()
				.fadeOut("slow");
			//fade the colour
			$(this)	.stop()
				.animate({"color": $(this).attr("rel")}, 250);
		});
	});
});

所以基本上，发生的事情是；

• 声明一个悬停颜色
• 当 DOM 加载完成后……
• 将一个 subDiv 附加到 hoverBtn div
• 在链接的悬停事件上
  将初始颜色存储在链接的 rel 属性中
  停止 subDiv 的动画
  将其隐藏，然后设置为淡入
  停止链接的动画
  重置其颜色并设置为淡入悬停颜色
• 在悬停事件的回调中
  停止 subDiv 的动画
  然后将其设置为淡出
  停止链接的动画
  然后将其设置为淡入其初始颜色

进一步开发

您可以尝试通过动态加载包含的 div 来改进这一点。这可能还涉及将包含的 div 的大小设置为锚元素的大小。