Jquery悬停类与背景图像淡入淡出

我有下面的Jquery脚本，在翻转时添加一个.hover类，然后在卷展栏中将其删除。目前，背景（无论是图像还是颜色）都很好地淡入淡出。不过，我不希望菜单文字淡入淡出。Jquery悬停类与背景图像淡入淡出

我知道CSS3的淡入淡出过渡和Jquery的颜色插件，但想要在图像背景中淡入淡出的选项（这就是为什么我想在淡出课程而不仅仅是背景 - 颜色。）任何帮助将不胜感激:)）预先感谢。

jQuery的

$(document).ready(function() { 

    //Set the anchor link opacity to 0 and begin hover function 
    $("#menu-sample-menu li a").hover(function() { 

     //Fade to an opacity of 1 at a speed of 200ms 
     $(this).fadeOut(0).addClass('hover').fadeIn(300); 

     //On mouse-off 
    }, function() { 

     //Fade to an opacity of 0 at a speed of 100ms 
     $(this).fadeOut(300) 
      .queue(function() { 
      $(this).removeClass('hover').fadeIn(0).dequeue() 
     }); 

    }); 
});

HTML

<nav id="access"> 
    <ul id="menu-sample-menu" class="menu"> 
     <li id="menu-item-198" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-198"><a href="http://www.threecell.com/demo/category/health-care-professional/">Health Care Professional</a> 

     </li> 
     <li id="menu-item-197" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-197"><a href="demo/category/web-designer/">Web Designer</a> 

      <ul class="sub-menu"> 
       <li id="menu-item-199" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-199"><a href="category/construction-worker/">Construction Worker</a> 

       </li> 
      </ul> 
     </li> 
    </ul> 
</nav>

风格

#access li { 
    position:relative; 
    float:left; 
    padding:0; 
    margin:0; 
} 

#access ul li:first-child { 
    padding-left:0; 
} 

#access a { 
    display:block; 
    padding:15px 24px; 
    color:#f0f0f0; 
    text-decoration:none; 

} 

#menu-sample-menu li { 
    color: black; 
    text-shadow: 0px 1px 4px #777; 
    background-color: green; 
    padding: 0 12px 0 12px; 
} 

#menu-sample-menu li a.hover { 
    background-color: orange; 
    background-image: url(images/over.jpg); 

}

来源

2013-08-30 user2325396

你可以做到这一点没有JavaScript的：http://jsfiddle.net/WjrnB/1/

只需使用：

#menu-sample-menu li a:hover { 
    background-color: orange; 
    background-image: url(images/over.jpg); 

}

代替

#menu-sample-menu li a.hover { 
    background-color: orange; 
    background-image: url(images/over.jpg); 

}

，并添加：

#menu-sample-menu li a { 
    -khtml-transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
    -o-transition: all 0.5s; 
    -ms-transition: all 0.5s; 
    transition: all 0.5s; 
}

来源

2013-08-30 14:23:05 Xarcell

我希望我能投票这千倍。 jQuery不是一切的答案！ – PlantTheIdea

Thx用于响应。我实际上并不想使用CSS3转换，因为缺乏IE9支持。在一个侧面说明，这CSS3淡入淡出工作与图像以及背景颜色？ – user2325396

与CSS3转换，你可以创建任何东西淡入淡出。元素中的所有元素或特定元素。至于IE9的支持，我不会因为它没有破坏任何东西而流汗，它只是不会褪色。其他一切都会奏效。您可以在跨浏览器网页设计中获得的最佳建议是，您可以设计项目，以便优雅地降级。看看这个转换：http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/和这个浏览器使用：http：//www.w3schools。 com/browsers/browsers_stats.asp – Xarcell

Xarcell的回答可能是最好的简洁，明智的。如果你想用JavaScript实现这个功能，一个选项是使用JQuery-UI，它具有包含转换的addClass和removeClass功能。

基本上，HTML和CSS是与上面相同，但JS将如下所示：

$(document).ready(function() { 

//Set the anchor link opacity to 0 and begin hover function 
$("#menu-sample-menu li a").hover(function() { 
    //Fade 'hover' class in at 300ms 
    $(this).addClass('hover', 300); 
    //On mouse-off 
}, function() { 
     //Fade 'hover' class out at 300ms 
     $(this).removeClass('hover', 300); 
    }); 
});

，当然，你必须包括jQuery的UI（我通常使用云天才的CDNJS）：

http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js

就个人而言，我如果我已经使用jQuery的UI使用此方法。否则，我会选择Xarcell的解决方案。

来源

2013-08-30 14:57:57 CRK

Jquery悬停类与背景图像淡入淡出

回答

相关问题