Question

我试图在多个div之间产生淡入淡出效果。但它没有用，请任何人都可以帮助我“我是javascript的新手” 这是我生成代码的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

您必须在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/

在DIVS之间淡出

2 个答案: