jQuery 动画/悬停和淡入淡出答案

【问题标题】：jQuery animation / hover and fadejQuery 动画/悬停和淡入淡出
【发布时间】：2010-01-03 21:07:52
【问题描述】：

这是我的 index.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fade.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div class="spacer"></div>
<div class="nav">
<a>&nbsp;</a>
<a href="" class="nav_menu" title="HOME">HOME</a>
<a href="" class="nav_menu" title="PORTFOLIO">PORTFOLIO</a>
<a href="" class="nav_menu" title="ABOUT ME">ABOUT ME</a>
<div class="clearer"></div>
</div>
</div>
</body>
</html>

我想将导航菜单淡化为我制作的图像。

这是我正在工作的fade.js。


$(document).ready(function(){
  $("a.nav_menu").hover(
    function() {
      $(this).stop().animate({"opacity": "0"}, "slow");
    },
    function() {
      $(this).stop().animate({"opacity": "1"}, "slow");
    });
});

我已经尝试过了。但它不起作用。


$(function(){
  $("a.nav_menu")
    .mouseover(function(){
      $(this).stop().animate({'background-image':'url(nav_hover.jpg)'},3000);
    })
    .mouseout(function(){
      $(this).stop().animate({'background-image':'url(nav_.jpg)'},3000);
    })
});

谁能帮帮我。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

看看这篇博文：http://www.bendewey.com/blog/index.php/9/jquery-rollover-image

根据 Daniel Roberts 的回答，该插件类似于他的 solution #2，在该解决方案中，我使用底部图像的基本链接，然后使用相对定位，将悬停图像放在最佳。当用户将鼠标悬停在链接上时，顶部的悬停图像的不透明度从 0 变为 1，现在取决于您在背景中的图像，这可能看起来不错且无缝，但是，如果您的背景图像有很多对比结果可能会有有趣的结果。

【讨论】：

非常感谢您对我的帮助。

【解决方案2】：

你想要什么样的动画？背景图像的淡入？那不是这样做的。尝试为 a.nav_menu 中的元素设置 :hover 背景图像，其中 a.nav_menu 具有默认状态。然后在悬停时，淡入内部元素。

说你的标记变成：

a href="" class="nav_menu" title="HOME"><strong>HOME</strong></a>

您现在可以设置 A 和 STRONG 标签的样式。 A 接收默认的背景图像。在你的 CSS 中：

a.nav_menu{
   background-image: url(nav_.jpg);
}
a.nav_menu strong{
   background:none;
   display:block;
}

在你的 javascript 中：

$(function(){
  $("a.nav_menu")
    .mouseover(function(){
      $(this).find('strong:first').stop().animate({'background-image':'url(nav_hover.jpg)', opacity: 1},3000);
    })
    .mouseout(function(){
      $(this).find('strong:first').stop().animate({'background-image':'none', opacity: 0},3000);
    })
});

我没有测试它，你应该检查 jquery 的 animate() 函数是否可以做你想要的，使用这样的背景图像。

另外，see this article，它使用背景位置和精灵图像代替。达到你想要的效果似乎更合适。

【讨论】：

不是这样。但我从你的帖子中学到了一些东西。非常感谢。看看我的网站的这个预览。 jorgeworks.zxq.net/preview/index.html。我只希望菜单的背景图像在鼠标悬停时淡入，如果鼠标悬停则淡出。
重点是：您可以淡入图像本身，如果您愿意，您必须在 DOM 元素和 html 标记上执行此操作。我认为你最好使用 css sprite 技术并使用背景位置（使用具有不透明度渐变的图像，并让它在鼠标悬停时向左滑动 - 从而进入不透明度：1，在鼠标移出时向右滑动 - 显示完全透明的图像的一部分。

【解决方案3】：

我很确定问题在于 JQuery 无法为背景图像设置动画效果。这是因为它归根结底是受 CSS 约束的，而 CSS 没有办法只改变背景图像的不透明度，当然也没有办法指定两个背景图像以不同的不透明度合并在一起。很抱歉这个坏消息。

解决方案 #1

做一些更简单的事情：使用这个 JQuery 插件Color Animations 为背景颜色设置动画。它可能没有背景图像动画那么性感，但如果它是一个简单的图像，它可能是一个很好的替代品。

解决方案 #2

您可以尝试使用 position:relative 或 position:absolute 将图像定位在其后面，然后淡化图像的不透明度。您甚至可以将两个图像放在同一个位置，然后让它们交替淡出。这个解决方案似乎可行，但也有点乱。如果我要这样做（我不知道我会这样做），我会用 JQuery 破解每个此类链接上的图像。如果您可以正确定位图像以及正确的尺寸和所有内容，那么淡入和淡出它们就不会那么难了。（著名的遗言。）

当您使用的工具没有按应有的方式工作时，这令人沮丧，但我希望这会有所帮助。

【讨论】：