页面内容褪色

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 ? ' &nbsp; ' + 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">&copy; 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;
});

可能会做你想做的事。