DIVS之间淡入淡出

Question

我试图让多个div之间的淡入淡出效果。 但它不工作，请任何人都可以帮助我“在JavaScript新的IM”
这是我从哪里产生的代码demo。
在这demo代码工作得很好，但是当我复制代码时，它停止工作。
希望我的问题很明确！谢谢
这是我尝试复制的代码。

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<script> 

txt1 = $("#contentarea-1").text(); 
txt2 = $("#contentarea-2").text(); 

$("#pg1").on('click', function() { 
    $('#contentarea-2').hide(); 
    $('#contentarea-1').fadeOut(500, function() { 
     $("#contentarea-1").hide(txt2); 
     $('#contentarea-1').fadeIn(500); 
    }); 
}); 

$("#pg2").on('click', function() { 
    $('#contentarea-1').hide(); 
    $('#contentarea-2').fadeOut(500, function() { 
     $("#contentarea-2").text(txt2); 
     $('#contentarea-2').fadeIn(500); 
    }); 
}); 

</script> 

<style> 
#content-wrapper{ 
    margin-left: 50px; 
} 
#contentarea-1{ 
    width: 450px; 
} 

#contentarea-2{ 
    width: 450px; 
    display:none; 
} 

#clear{ 
    clear: both; 
} 

nav{ 
    text-align: center; 
} 

nav ul{ 
    list-style: none; 
} 

nav ul li{ 
    display: inline-block; 
    padding: 15px; 
} 
</style> 

<nav> 
    <ul> 
     <li><a href="#1" id="pg1">Page 1</a></li> 
     <li><a href="#2" id="pg2">Page 2</a></li> 
    </ul> 
</nav> 
<div id="content-wrapper"> 
    <div id="contentarea-1"> 
     <wbr><p>FIRST PAGE</p></wbr> 
    </div> 
    <div id="contentarea-2"> 
     <wbr><p> SECOND PAGE</p></wbr> 
    </div> 
    <div id="clear"></div> 
</div> 

Answer 1

只需稍作更改。你忘了换你的JavaScript在一个jQuery domready容器：

http://jsfiddle.net/3tx8u/

<script> 
$(function() { 
    txt1 = $("#contentarea-1").text(); 
    txt2 = $("#contentarea-2").text(); 

    $("#pg1").on('click', function() { 
     $('#contentarea-2').hide(); 
     $('#contentarea-1').fadeOut(500, function() { 
      $("#contentarea-1").hide(txt2); 
      $('#contentarea-1').fadeIn(500); 
     }); 
    }); 
    $("#pg2").on('click', function() { 
     $('#contentarea-1').hide(); 
     $('#contentarea-2').fadeOut(500, function() { 
      $("#contentarea-2").text(txt2); 
      $('#contentarea-2').fadeIn(500); 
     }); 
    }); 
}); 
</script> 

Answer 2

您也可以使用fadeToggle()

$(function() { 
    txt1 = $("#contentarea-1").text(); 
    txt2 = $("#contentarea-2").text(); 

    $("#pg1").on('click', function() { 

     $('#contentarea-1').fadeToggle(function() { 
      $('#contentarea-2').fadeToggle(); 
     }); 

    }); 

    $("#pg2").on('click', function() { 
     $('#contentarea-2').fadeToggle(function() { 
      $('#contentarea-1').fadeToggle(); 
     }); 

    }); 
}); 

http://jsfiddle.net/WuVk9/

Answer 3

，你必须执行里面的代码document ready功能。

描述：指定一个函数，当DOM完全加载时，要执行的操作是 。

它确保在尝试访问和使用它们之前，所有页面对象都被加载到DOM中。

在您的jsfiddle代码的工作，因为你选用在“的onload”运行脚本代码，在你真正的代码没有onload事件，你必须使用的document.ready

$(document).ready(function() { 

    txt1 = $("#contentarea-1").text(); 
    txt2 = $("#contentarea-2").text(); 
    $("#pg1").on('click', function() { 
     $('#contentarea-2').hide(); 
     $('#contentarea-1').fadeOut(500, function() { 
      $("#contentarea-1").hide(txt2); 
      $('#contentarea-1').fadeIn(500); 
     }); 
    }); 
    $("#pg2").on('click', function() { 
     $('#contentarea-1').hide(); 
     $('#contentarea-2').fadeOut(500, function() { 
      $("#contentarea-2").text(txt2); 
      $('#contentarea-2').fadeIn(500); 
     }); 
    }); 
}); 

工作小提琴：http://jsfiddle.net/IrvinDominin/KBGp7/4/