使用 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;
});
谢谢，
尼克
I am using jQuery to add and remove a class to/from my nav links which changes the background image. You can see this in action on this page.
I would like, if possible, to add a fade transition between the images, ideally without one fading out completely and the other fading in (so presumably fading one image over the other so that it obscures the image completely).
I am not sure how to do this with jQuery though, and would be grateful for any advice. Here is an example of a click function as it currently looks:
$("nav").delegate("a.fade", "click", function ()
{
window.location.hash = $(this).attr("href");
$("#panel").slideUp("slow");
$(this).addClass("current");
$("#contact").removeClass("current");
return false;
});
Thanks,
Nick
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
$('#panel').animate({ opacity: '-=0.5' }, 200);使用 jQuery.animate 函数。从我的示例来看，#panel 的不透明度（从 1 开始）将在 200 毫秒内降低到 0.5。
对#panel 和#contact 都执行此操作。您可以调整时间安排，以便它们按照您想要的方式制作动画。
$('object').animate({property: target value (-/+)}, timespan);您还可以检查#panel 不透明度值以启动#contact 动画。
如果#panel.opacity < 0.8
然后#contact.animate...
$('#panel').animate({ opacity: '-=0.5' }, 200);Use the jQuery.animate function. From my example #panel's opacity (starting at 1) will decrease to 0.5 over 200 milliseconds.
Do this for both #panel and #contact. You can play around with the timing so that they animate the way you want.
$('object').animate({property: target value (-/+)}, timespan);You could also do check on the #panel opacity value to start the #contact animation.
if #panel.opacity < 0.8
then #contact.animate...