Javascript 在div之间淡出

我试图在多个div之间产生淡入淡出效果。 但它不工作，请任何人帮我“我是javascript新手”
这是我生成代码的地方。
在这种情况下，代码工作得很好，但当我复制代码时，它会停止工作。
希望我的问题清楚！谢谢
这是我试图复制的代码

<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>

txt1=$（“#contentarea-1”）.text（）；
txt2=$（“#contentarea-2”）.text（）；
$（“#pg1”）。在（'click'，函数（）{
$（'#contentarea-2'）.hide（）；
$（'#contentarea-1'）。淡出（500，函数（）{
$（“#contentarea-1”）.hide（txt2）；
$（#contentarea-1'）。fadeIn（500）；
});
});
$（“#pg2”）。在（'click'，函数（）{
$（'#contentarea-1'）.hide（）；
$（'#contentarea-2'）。淡出（500，函数（）{
$（“#contentarea-2”）.text（txt2）；
$（#contentarea-2'）。fadeIn（500）；
});
});
#内容包装器{
左边距：50像素；
}
#内容区-1{
宽度：450px；
}
#内容区-2{
宽度：450px；
显示：无；
}
#清楚的{
明确：两者皆有；
}
导航{
文本对齐：居中；
}
导航ul{
列表样式：无；
}
李国荣{
显示：内联块；
填充：15px；
}




首页

第二页

只需稍作改动。您忘记将javascript包装在jquery

domready

容器中：

$（函数（）{
txt1=$（“#contentarea-1”）.text（）；
txt2=$（“#contentarea-2”）.text（）；
$（“#pg1”）。在（'click'，函数（）{
$（'#contentarea-2'）.hide（）；
$（'#contentarea-1'）。淡出（500，函数（）{
$（“#contentarea-1”）.hide（txt2）；
$（#contentarea-1'）。fadeIn（500）；
});
});
$（“#pg2”）。在（'click'，函数（）{
$（'#contentarea-1'）.hide（）；
$（'#contentarea-2'）。淡出（500，函数（）{
$（“#contentarea-2”）.text（txt2）；
$（#contentarea-2'）。fadeIn（500）；
});
});
});

您必须在函数中执行代码

Description：指定DOM完全关闭时要执行的函数 上膛了

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

在JSFIDLE中，您的代码可以工作，因为您选择在“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);
        });
    });
});

---

工作小提琴：

小提琴是一样的；但您是否正在执行$（document.ready）函数中的函数？检查控制台是否有错误？“它停止工作”是控制台中的消息吗？谢谢大家。爱德华：你说得对，我忘了在$document中执行我的函数。准备好了，所以我添加了这个代码，它工作得很好！谢谢你，Paul，我在$document中执行我的函数。准备好的而且效果很好！

$(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);
        });
    });
});