使一個元素淡出和一個新的元素淡入Jquery

我有一個頁面，我會讓使用Jquery進行導航。當我點擊一個鏈接時，我想要一個部分消失和一個新的部分，我得到的get方法被插入。使一個元素淡出和一個新的元素淡入Jquery

我有這個部分工作，但是，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的過程中。

感謝您的時間。

來源

2013-11-15 ragebunny

您是否在控制檯中收到任何錯誤消息？ – Pascamel

完全沒有錯誤，只是一個關於preventDefault被棄用，但不應該有任何關係。（這是一個鉻我認爲的錯誤） – ragebunny

@KristerAndersson這樣做，同樣的事情，淡出然後新的部分剛剛出現。 – ragebunny

嘗試rhis：

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

加載內容，然後再衰落可能會解決您的問題。

來源

2013-11-15 16:13:58 Hiral

對於淡入工作中元素必須隱藏的情況下，當您調用fadeIn時，元素可見，因爲您正在淡出home_content。

改爲撥打fadeOuthome_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()加載遠程內容

來源

2013-11-15 16:14:17

先做Ajax調用，這樣，當元素已經淡出，然後只使用返回的承諾，趕響應和褪色很可能結束在另一個元素

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

    }); 
});

請注意，你是不是淡入和淡出相同的元素？

來源

2013-11-15 16:15:07 adeneo

+1好一個.... –

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

來源

2013-11-15 16:16:02 ilyass

使一個元素淡出和一個新的元素淡入Jquery

回答

相關問題