Question

我希望在文本转换过程中出现淡入淡出效果。但我不知道怎么办？我必须把fadeIn（）放在html方法里面吗？欢呼

我必须添加更多文字，因为网站要求我这样做

$(document).ready(function(){
  $("#b1").click(function(){
      $("#container")
    $("#container").html($("#page1").html());
  });
      $("#b2").click(function(){
    $("#container").html($("#page2").html());
  });
      $("#b3").click(function(){
    $("#container").html($("#page3").html());
  });
});

li {
    display: inline
}

#page2 {
    display: none;
}

#page3 {
    display: none;
}



#page1 {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>NAV BAR</p>
        <nav>
            <ul>
                <li><button id="b1">PAGE1</button></li>
                <li><button id="b2">PAGE2</button></li>
                <li><button id="b3">PAGE3</button></li>
            </ul>
        </nav>
        <div id="container"></div>
            <div id="page1">
                <p>JE SUIS LA PAGE 1</p><p>JE SUIS LA PAGE 1</p><p>JE SUIS LA PAGE 1</p><p>JE SUIS LA PAGE 1</p><p>JE SUIS LA PAGE 1</p>
            </div>
            <div id="page2">
                <p>IAM THE PAGE 2</p><p>IAM THE PAGE 2</p><p>IAM THE PAGE 2</p><p>IAM THE PAGE 2</p><p>IAM THE PAGE 2</p><p>IAM THE PAGE 2</p>
            </div>
            <div id="page3">
                <p>00010111011010</p><p>00010111011010</p><p>00010111011010</p><p>00010111011010</p><p>00010111011010</p><p>00010111011010</p>
            </div>

Answer 1

一旦元素可见，您需要隐藏它，或者先淡出它。

所有jQuery动画都有完整的回调，所以你可以做类似的事情。

$("#container").fadeOut(function(){
    /* container is now hidden so change the html and fade it back in */
    $(this).html($("#page1").html()).fadeIn();
});

为了更快地隐藏你可以链接一切：

$("#container").hide().html($("#page1").html()).fadeIn();

Answer 2

哟不需要用jquery插入内容......

我建议你把内容留在容器里，然后把你的#pages {display：none;与css。

然后在点击事件中调用两个函数：

首先：隐藏所有#pages。

第二：使用jquery中的fadeToggle（）函数来显示你的元素。

Answer 3

这会给你一个淡入/淡出效果......

$(document).ready(function(){
    $("#b1").click(function(){
        $("#container").fadeOut(function() {
            $(this).html($("#page1").html()).fadeIn();
        });
    });
    // and so on...
});

jQuery fadeOut（）fadeIn（）与html（）函数

3 个答案: