Question

好的，所以我的网站左侧有一个div容器，其中包含带链接的navBar。在右侧是另一个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;
});

Answer 1

技巧是fadeIn需要在加载成功时发生。它是在内容加载之前调用的。您需要使用load（）方法的回调处理程序参数：

$('.menu_side').click(function() {
  var href = $(this).attr('href');
  $('#main').hide().load(href, function() { $(this).fadeIn('fast'); });
  return false;
});

可能会做你想做的事。

淡入页面内容

1 个答案: