使用jQuery为背景图像添加淡入淡出过渡到addClass

我正在使用jQuery在导航链接中添加和删除一个类，这会更改背景图像。您可以在上看到这一点

如果可能的话，我想在图像之间添加一个淡入过渡，理想情况下，一个图像不会完全淡出，另一个图像不会完全淡入（因此，假设一个图像淡入另一个图像，从而使图像完全模糊）

不过，我不知道如何使用jQuery实现这一点，如果您有任何建议，我将不胜感激。下面是一个单击功能的示例，它当前的外观如下：

$("nav").delegate("a.fade", "click", function ()
    {
        window.location.hash = $(this).attr("href");
        $("#panel").slideUp("slow");
        $(this).addClass("current");
        $("#contact").removeClass("current");
        return false;
    });

谢谢

---

尼克

这篇文章应该是你感兴趣的：

使用jQuery进行图像交叉淡入淡出过渡：

$（“#面板”）.animate（{opacity:'-=0.5'}，200）； 使用jQuery.animate函数。在我的示例中，面板的不透明度（从1开始）将在200毫秒内降至0.5

对#面板和#触点执行此操作。您可以随意调整计时，使其按您想要的方式设置动画

$('object').animate({property: target value (-/+)}, timespan); $（'object'）.animate（{property:target value（-/+）}，timespan）； 您还可以检查#面板不透明度值以启动#联系人动画

如果#面板不透明度<0.8

---

然后#联系。制作动画

离题。。。添加body overflow-y：滚动；（设计原理）防止页面“抖动”（当你调用联系人表单时）。我对滑动联系人表单（即面板分区）很满意。我想要的是导航链接上的淡入淡出过渡，即树叶。目前，我正在添加和删除一个类“current”，它会更改背景图像。我希望能够改变这一点，以逐渐消失的过渡。谢谢。我现在正在尝试在你链接到为我工作的页面上获取淡入淡出方法1。我让它处理叶子图像，但当我添加图像链接时，即从

更改为

$('object').animate({property: target value (-/+)}, timespan);