Javascript 如何使用jQuery淡入/淡出背景，而不是它的子项
我的网页上有一个菜单，我想淡出它的背景，但不是文本。下面是菜单、jQuery和CSS的表格 正文/表格：Javascript 如何使用jQuery淡入/淡出背景，而不是它的子项,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我的网页上有一个菜单，我想淡出它的背景，但不是文本。下面是菜单、jQuery和CSS的表格 正文/表格： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style type="text/css"> #menu { width:900px; margin-left:a
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#menu {
width:900px;
margin-left:auto;
margin-right:auto;
font-family:"britannic bold";
font-size:200%;
}
#allbodies {
width:900px;
margin-left:auto;
margin-right:auto;
}
#menu table tr td:hover {
color:#fff;
}
</style>
<title></title>
</head>
<body>
<div id="menu">
<table>
<tr>
<td id="logo" style="width:150px;height:200px;">
<a href="template.html" style="text-decoration:none"><img alt="Logo" height="200" src="logo.jpg" width="150"></a>
</td>
<td id="home" style="cursor:pointer;width:150px;height:200px;background-color:red;">
<p id="menutext" style="text-align: center">HOME</p>
</td>
<td id="games" style="cursor:pointer;width:150px;height:200px;background-color:red;">
<p id="menutext" style="text-align: center">GAMES</p>
</td>
<td id="about" style="cursor:pointer;width:150px;height:200px;background-color:red;">
<p id="menutext" style="text-align: center">ABOUT</p>
</td>
<td id="contact" style="cursor:pointer;width:150px;height:200px;background-color:red;">
<p id="menutext" style="text-align: center">CONTACT</p>
</td>
<td id="author" style="cursor:pointer;width:150px;height:200px;background-color:red;">
<p id="menutext" style="text-align: center">AUTHOR</p>
</td>
</tr>
</table>
</div>
<div id="allbodies">
<div id="homebody">
<h1>Home</h1>
</div>
<div id="gamesbody">
<h1>Games</h1>
</div>
<div id="aboutbody">
<h1>About</h1>
</div>
<div id="contactbody">
<h1>Contact</h1>
</div>
<div id="authorbody">
<h1>Author</h1>
</div>
</div>jQuery:
<script>
$(function(){
$("#logo").mouseenter(function(){
$("#logo").fadeTo("fast",1.0);
});
$("#logo").mouseleave(function(){
$("#logo").fadeTo("fast",0.5);
});
$("#home").mouseenter(function(){
$("#home").fadeTo("fast",1.0);
});
$("#home").mouseleave(function(){
$("#home").fadeTo("fast",0.5);
});
$("#games").mouseenter(function(){
$("#games").fadeTo("fast",1.0);
});
$("#games").mouseleave(function(){
$("#games").fadeTo("fast",0.5);
});
$("#about").mouseenter(function(){
$("#about").fadeTo("fast",1.0);
});
$("#about").mouseleave(function(){
$("#about").fadeTo("fast",0.5);
});
$("#contact").mouseenter(function(){
$("#contact").fadeTo("fast",1.0);
});
$("#contact").mouseleave(function(){
$("#contact").fadeTo("fast",0.5);
});
$("#author").mouseenter(function(){
$("#author").fadeTo("fast",1.0);
});
$("#author").mouseleave(function(){
$("#author").fadeTo("fast",0.5);
});
$("#gamesbody").hide();
$("#aboutbody").hide();
$("#authorbody").hide();
$("#contactbody").hide();
$("#home").hide();
$("#games").hide();
$("#about").hide();
$("#author").hide();
$("#contact").hide();
$("#homebody").hide();
$("#homebody").fadeTo("slow",1.0);
$("#home").fadeTo("slow",0.5);
$("#games").fadeTo("slow",0.5);
$("#about").fadeTo("slow",0.5);
$("#author").fadeTo("slow",0.5);
$("#contact").fadeTo("slow",0.5);
$("#logo").hide();
$("#logo").fadeTo("slow",0.5);
$("#menutext").fadeTo("slow",1.0);
$("#home").click(function(){
$("#home").fadeIn("slow");
$("#homebody").fadeIn("slow");
$("#homebody").show();
$("#gamesbody").hide();
$("#aboutbody").hide();
$("#authorbody").hide();
$("#contactbody").hide();
});
$("#about").click(function(){
$("#about").fadeIn("slow");
$("#aboutbody").fadeIn("slow");
$("#aboutbody").show();
$("#gamesbody").hide();
$("#homebody").hide();
$("#authorbody").hide();
$("#contactbody").hide();
});
$("#contact").click(function(){
$("#contact").fadeIn("slow");
$("#contactbody").fadeIn("slow");
$("#contactbody").show();
$("#gamesbody").hide();
$("#aboutbody").hide();
$("#authorbody").hide();
$("#homebody").hide();
});
$("#author").click(function(){
$("#author").fadeIn("slow");
$("#authorbody").fadeIn("slow");
$("#authorbody").show();
$("#gamesbody").hide();
$("#aboutbody").hide();
$("#homebody").hide();
$("#contactbody").hide();
});
$("#games").click(function(){
$("#games").fadeIn("slow");
$("#gamesbody").fadeIn("slow");
$("#homebody").hide();
$("#gamesbody").show();
$("#aboutbody").hide();
$("#authorbody").hide();
$("#contactbody").hide();
});
});
</script>
</body>
#菜单{
宽度：900px；
左边距：自动；
右边距：自动；
字体系列：“不列颠粗体”；
字体大小：200%；
}
#所有机构{
宽度：900px；
左边距：自动；
右边距：自动；
}
#菜单表tr td：悬停{
颜色：#fff；
}
主页
游戏
联系人
作者
家
游戏
关于
接触
作者
jQuery：
$（函数（）{
$（“#logo”）.mouseenter（函数（）{
$（#logo”）.fadeTo（“fast”，1.0）；
});
$（“#logo”）.mouseleave（函数（）{
$（#logo”）.fadeTo（“fast”，0.5）；
});
$（“#home”）.mouseenter（函数（）{
$（#home”）.fadeTo（“fast”，1.0）；
});
$（“#home”）.mouseleave（函数（）{
美元(#home),fadeTo(fast),0.5 ;；
});
$（“#游戏”）.mouseenter（函数（）{
$（#games”）.fadeTo（“fast”，1.0）；
});
$（“#游戏”）.mouseleave（函数（）{
美元(games),法德托(fast),0.5 ;；
});
$（“#about”）.mouseenter（函数（）{
美元("关于"),法德托("快速",1.0),；
});
$（“#关于”）.mouseleave（函数（）{
美元(约),法德托(快速),0.5 ;；
});
$（“#联系人”）.mouseenter（函数（）{
$（#contact”）.fadeTo（“fast”，1.0）；
});
$（“#联系人”）.mouseleave（函数（）{
美元(#contact),法德托(fast),0.5 ;；
});
$（“#作者”）.mouseenter（函数（）{
$（“作者”）.fadeTo（“快速”，1.0）；
});
$（“#作者”）.mouseleave（函数（）{
$（“作者”）.fadeTo（“快速”，0.5）；
});
$（“#gamesbody”）.hide（）；
$（“#aboutbody”）.hide（）；
$（“#authorbody”）.hide（）；
$（“#contactbody”）.hide（）；
$（“#home”）.hide（）；
$（“#游戏”）.hide（）；
$（“#关于”）.hide（）；
$（“#作者”）.hide（）；
$（“#联系人”）.hide（）；
$（“#homebody”）.hide（）；
$（“#homebody”）.fadeTo（“slow”，1.0）；
美元(#home),法德托("慢",0.5),；
美元(#games),法德托("慢",0.5),；
美元(约),法德托(慢),0.5 ;；
$（“作者”）.fadeTo（“慢”，0.5）；
$（#contact”）.fadeTo（“slow”，0.5）；
$（“#logo”）.hide（）；
$（#logo”）.fadeTo（“慢”，0.5）；
$（“#menutext”）.fadeTo（“slow”，1.0）；
$（“#主页”）。单击（函数（）{
$（#home”）.fadeIn（“慢”）；
$（#homebody”）.fadeIn（“慢”）；
$（“#homebody”）.show（）；
$（“#gamesbody”）.hide（）；
$（“#aboutbody”）.hide（）；
$（“#authorbody”）.hide（）；
$（“#contactbody”）.hide（）；
});
$（“#关于”）。单击（函数（）{
美元（“#about”）.fadeIn（“慢”）；
美元（“#aboutbody”）.fadeIn（“慢”）；
$（“#aboutbody”）.show（）；
$（“#gamesbody”）.hide（）；
$（“#homebody”）.hide（）；
$（“#authorbody”）.hide（）；
$（“#contactbody”）.hide（）；
});
$（“#联系人”）。单击（函数（）{
$（“#联系”）.fadeIn（“慢”）；
$（“#contactbody”）.fadeIn（“慢速”）；
$（“#contactbody”）.show（）；
$（“#gamesbody”）.hide（）；
$（“#aboutbody”）.hide（）；
$（“#authorbody”）.hide（）；
$（“#homebody”）.hide（）；
});
$（“#作者”）。单击（函数（）{
$（“#作者”）.fadeIn（“慢”）；
$（“#authorbody”）.fadeIn（“慢”）；
$（“#authorbody”）.show（）；
$（“#gamesbody”）.hide（）；
$（“#aboutbody”）.hide（）；
$（“#homebody”）.hide（）；
$（“#contactbody”）.hide（）；
});
$（“#游戏”）。单击（函数（）{
$（“游戏”）.fadeIn（“慢”）；
美元（“#gamesbody”）.fadeIn（“慢”）；
$（“#homebody”）.hide（）；
$（“#gamesbody”）.show（）；
$（“#aboutbody”）.hide（）；
$（“#authorbody”）.hide（）；
$（“#contactbody”）.hide（）；
});
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Effects - Animate demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.toggler { width: 500px; height: 200px; position: relative; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script>
$(function() {
var state = true;
$( "#button" ).click(function() {
if ( state ) {
$( "#effect" ).animate({backgroundColor: "#aa0000"}, 1000 );
} else {
$( "#effect" ).animate({backgroundColor: "#fff"}, 1000 );
}
state = !state;
});
});
</script>
</head>
<body>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Animate</h3>
<p>Just a line of text</p>
</div>
</div>
<a href="#" id="button" class="ui-state-default ui-corner-all">Toggle Effect</a>
</body>
</html>
jQuery UI效果-动画演示
.toggler{宽度：500px；高度：200px；位置：相对；}
#按钮{填充：.5em 1em；文本装饰：无；}
#效果{宽度：240px；高度：135px；填充：0.4em；位置：相对；背景：#fff；}
#效果h3{边距：0；填充：0.4em；文本对齐：居中；}
$（函数（）{
var状态=真；
$（“#按钮”）.clic
$("#parent").mouseenter(function () {
$(this).animate({ backgroundColor: 'rgba(64, 64, 64, 1)' }, 'fast');
});
$("#parent").mouseleave(function () {
$(this).animate({ backgroundColor: 'rgba(64, 64, 64, 0.5)' }, 'fast');
});
#parent {
background-color: rgba(64, 64, 64, 0.5);
}