javascript - 是否可以将 jQuery fadeIn 函数添加到 css 更改中？

Question

我只是想知道是否可以使用 fadeIn 函数增强我使用 jQuery 执行的 css 背景更改。我知道这可以使用隐藏的 div 来完成，但我更愿意使用 1 个 div 和 fadeIn 来自 CSS 的图像。这是没有淡入淡出的工作脚本。

jQuery('nav .home a').mouseover(function()
  {
    jQuery('.viewport').addClass('viewporthome');
  });
jQuery('nav .home a').mouseout(function()
  {
    jQuery('.viewport').removeClass('viewporthome');
  });

我尝试嵌套 jQuery(jQuery('.viewport').addClass('viewporthome')).fadeIn(1000); 但无济于事。有人有什么想法吗？

Answer 1

只需链接事件。要使 div 淡入，请执行以下操作:

jQuery('nav .home a').mouseover(function(){
    jQuery('.viewport').hide().addClass('viewporthome').fadeIn(500);
  });

要在 mouseout 上获得相同的效果，请使用回调函数:

jQuery('nav .home a').mouseout(function(){
    jQuery('.viewport').fadeOut(500, function(){ 
        //this is the callback function and runs after div fades out
        $(this).removeClass('viewporthome');
     });
  });

演示: http://jsfiddle.net/dirtyd77/Q4wK5/