页面内容褪色
Fading in Page Content
本文关键字:褪色 更新时间:2023-09-26
好的,所以我的网站左侧有一个div容器,其中包括我的导航栏和链接。右侧是另一个div容器,我希望在单击链接时,该容器的内容能够淡入。但是,我不想刷新整个页面。我有代码可以做到这一点,但由于某种原因,它不起作用。然而,它在以前的空白html文档上工作。提前谢谢。
HTML:
<!doctype html>
<html lang="en"><head>
<link rel="stylesheet" type="text/css" href="../styless.css" />
<link rel="stylesheet" type="text/css" href="../images/jquery.fancybox-1.3.4.css" media="screen" />
<link href="../fadeStyle.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="../../../GJDG/js/nav.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><'/script>');
</script>
<script type="text/javascript" src="../images/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="../images/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a[rel=example_group]").fancybox({
'overlayColor' : '#000',
'overlayOpacity' : 0.9,
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">' +(title.length ? ' ' + title : '') + '</span>';
}
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "fast");
},
function() {
$(this).stop().animate({"opacity": "1"}, "fast");
});
$("img.c").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "fast");
},
function() {
$(this).stop().animate({"opacity": "1"}, "fast");
});
$("img.e").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "fast");
},
function() {
$(this).stop().animate({"opacity": "1"}, "fast");
});
});
</script>
<style>
body { font-family: Helvetica, Arial, sans-serif; }
.container {
width: 100%; left: 0; right: 0; top:0; bottom: 0; position: fixed; overflow: auto;
background: rgba(16,16,16,0.0);
}
</style>
</head>
<body>
<div class="container">
<div id="menu">
<img style="position:absolute; top:25px; left:50px; width:200px; height:73px" src="../../../Envy1.png">
<div style="position: absolute; top:630px; left:50px; font-size:11px; width:200px; color:#FFF">© 2012 Envy Cosmetics</div>
<div id="navBar">
<font face="abeatbyKai">
<ul id="menu-list">
<li><a class="menu_side" href="../News.html" style="text-decoration: none" id="one">News</a></li>
<li><a class="menu_side" href="../About Us.html" style="text-decoration: none" id="two">About Us</a></li>
<li><a class="menu_side" href="../Gallery.html" style="text-decoration: none" id="three">Gallery</a></li>
<li><a class="menu_side" href="../Affiliates.html" style="text-decoration: none" id="four">Affiliates</a></li>
<li><a class="menu_side" href="../Biography.html" style="text-decoration: none" id="five">Biography</a></li>
<li><a class="menu_side" href="../Contact.html" style="text-decoration: none" id="six">Contact</a></li>
</ul>
</font>
</div>
<div class="fadehover1">
<a href=""><img src="../../../twitter1.png" alt="" class="a" /></a>
<a href=""><img src="../../../twitter2.png" alt="" class="b" /></a>
</div>
<div class="fadehover2">
<a href=""><img src="../../../facebook1.png" alt="" class="c" /></a>
<a href=""><img src="../../../facebook2.png" alt="" class="d" /></a>
</div>
<div class="fadehover3">
<a href=""><img src="../../../youtube1.png" alt="" class="e" /></a>
<a href=""><img src="../../../youtube2.png" alt="" class="f" /></a>
</div>
</div>
<div id="main">
<div id="gallery1">
<a rel="example_group" href="../images/1_b.jpg" title="ENVY!"><img alt="" src="../images/1_s.jpg" /></a>
<a rel="example_group" href="../images/2_b.jpg" title="ENVY!"><img alt="" src="../images/2_s.jpg" /></a>
<a rel="example_group" href="../images/3_b.jpg" title="ENVY!"><img alt="" src="../images/3_s.jpg" /></a>
<a rel="example_group" href="../images/4_b.jpg" title="ENVY!"><img alt="" src="../images/4_s.jpg" /></a>
<a rel="example_group" href="../images/5_b.jpg" title="ENVY!"><img alt="" src="../images/5_s.jpg" /></a>
<a rel="example_group" href="../images/6_b.jpg" title="ENVY!"><img alt="" src="../images/6_s.jpg" /></a><br>
<a rel="example_group" href="../images/7_b.jpg" title="ENVY!"><img alt="" src="../images/7_s.jpg" /></a>
<a rel="example_group" href="../images/8_b.jpg" title="ENVY!"><img alt="" src="../images/8_s.jpg" /></a>
<a rel="example_group" href="../images/9_b.jpg" title="ENVY!"><img alt="" src="../images/9_s.jpg" /></a>
<a rel="example_group" href="../images/10_b.jpg" title="ENVY!"><img alt="" src="../images/10_s.jpg" /></a>
<a rel="example_group" href="../images/11_b.jpg" title="ENVY!"><img alt="" src="../images/11_s.jpg" /></a>
<a rel="example_group" href="../images/12_b.jpg" title="ENVY!"><img alt="" src="../images/12_s.jpg" /></a>
</div>
</div>
</div>
<script src="../jquery.backstretch.min.js"></script>
<script>
$.backstretch("photo1.jpg", {speed: 500});
</script>
<div id="mesh"></div>
nav.js
$(document).ready(function() {
$('#main').load($().attr('href'));
});
$('.menu_side').click(function() {
var href = $(this).attr('href');
$('#main').hide().load(href).fadeIn('fast');
return false;
});
诀窍是,fadeIn需要在加载成功时发生。当前正在加载内容之前调用它。您需要使用load()方法的回调处理程序参数:
$('.menu_side').click(function() {
var href = $(this).attr('href');
$('#main').hide().load(href, function() { $(this).fadeIn('fast'); });
return false;
});
可能会做你想做的事。
相关文章:
- jQuery而不是向左移动.它会褪色.滑块
- JavaScript即时搜索潜水隐藏与褪色效果
- Loader出现时使我的页面褪色
- HTML5视频-褪色效果不适用于Chrome
- 黑色调整大小的画布不会随着时间的推移将绘图完全褪色为黑色
- Javascript图像褪色
- 一个接一个地褪色
- 带褪色+滑动的引导旋转木马幻灯片
- 单击“菜单”时,菜单项在屏幕上居中,具有褪色背景和边框效果
- 关于动作脚本颜色褪色的想法/帮助
- 褪色幻灯片不循环
- jQuery fadeTo() 不会因 appendTo() 在完成时褪色
- 文本颜色,随时间褪色效果
- 一一褪色
- 网站褪色效果在Internet Explorer中不起作用
- Jquery褪色(稍微不寻常的请求)
- 带链接的褪色图像
- 文本中从左到右褪色的问题
- 背景颜色不褪色
- jQuery悬停时不会褪色