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/