Question

我有一个页面，我允许使用Jquery进行导航。当我点击一个链接时，我想要一个淡出的部分和一个新的部分，我可以使用get方法插入。

我已经部分工作，但是，fadeIn（）方法似乎不起作用，我100％肯定我应该怎么做这个任务。

这是我的索引页面的HTML

<div class="mid_section">
        <div class="home_content container">
            <div class="step_second_row">   
                <ul>
                    <li>
                        <a href="about.php" id="about_link">Learn more</a>
                    </li>
                    <li>
                        something
                    </li>
                    <li>
                        something
                    </li>
                </ul>
            </div>

        </div>

    </div>

Jquery的

$(document).ready(function(){
    $("#about_link").on("click", function( e ){
        $(".home_content").fadeToggle("slow", function() {
            $.get("about.php", function( response ) {

                var content = $(response).find(".about_content");

                $(".mid_section").fadeIn("slow").html(content);
            });
        });
        e.preventDefault();
    });
});

正在加载的部分

<h1>About us!!!</h1>
<p>
    Lorem ipsum dolor sit amet
</p>

我真的很挣扎，有人能告诉我如何实现这种目标吗？或者我做错了，我仍然在学习Jquery。

谢谢你的时间。

Answer 1

试试rhis：

$(".mid_section").html(content).hide().fadeIn("slow");

首先加载内容然后逐渐淡出可能会解决您的问题。

Answer 2

首先执行ajax调用，这样可能在元素淡出时完成，然后只使用返回的promise来捕获响应并淡入其他元素

$(document).ready(function(){
    $("#about_link").on("click", function( e ){
        e.preventDefault();

        var xhr = $.get("about.php");

        $(".home_content").fadeToggle("slow", function() {
            xhr.done(function(response) {
                var content = $(response).find(".about_content");
                $(".mid_section").hide().html(content).fadeIn("slow");
            });
        });

    });
});

请注意，您没有淡入淡出相同的元素？

Answer 3

要使fadeIn工作，必须隐藏元素，在您调用fadeIn时，元素可见，因为您正在淡出home_content。

而是在fadeOut上致电home_content。

$(document).ready(function () {
    $("#about_link").on("click", function (e) {
        $(".mid_section").fadeToggle("slow", function () {
            $(this).load('about.php .about_content', function () {
                $(this).fadeIn("slow")
            })
        });
        e.preventDefault();
    });
});

还可以使用.load()加载远程内容

Answer 4

  $(document).ready(function(){
      $("#about_link").on("click", function( e ){
        $.get("about.php", function( response ) {
          $(".mid_section").fadeOut("slow", function() {


                var content = $(response).find(".about_content");

                $(".mid_section").html(content).fadeIn("slow");
            });
        });
        e.preventDefault();
    });
  });

使一个元素淡出并使用Jquery淡入新元素

4 个答案: