iframe淡入淡出/使用jQuery

我需要一個iframe來淡出舊頁面，然後在用戶點擊各種鏈接之一併且無法讓代碼工作時淡入新頁面。只是想知道你是否能看到我出錯的地方。iframe淡入淡出/使用jQuery

<div id="menubar1"> 
    <a href="link1" target="iframe1"> link 1 </a> 
    <a href="link 2" target="iframe1"> link 2 </a> 
    <a href="link 3" target="iframe1"> link 3 </a> 
    <a href="link 4" target="iframe1"> link 4 </a> 
</div> 

<iframe id="iframe1" name="iframe1" src="homepage.html" frameborder="0"></iframe> 

<script> 
     $("#menubar1 a").click(function() { 
      $("#iframe1").FadeOut("slow"); 
      $("#iframe1").FadeIn("slow"); 
     }); 
</script>

來源

2013-11-05 nothisispatrick11

首先更改iFrame的src屬性，然後使用.FadeIn（）。 –

什麼不適合你？你的代碼中沒有任何地方告訴iframe改變src。只是淡入淡出。這是特別的問題嗎？你看到沒有淡入或淡出？ –

這種方式應該工作。

$("#menubar1 a").click(function(e) { 
     e.preventDefault(); 
     var src = $(this).attr('href'); 

     $('#iframe1').fadeOut(1000,function(){ 
      $('#iframe1').attr('src',src); 
      $('#iframe1').fadeIn(1000); 
     }); 
    });

您現在可以移除target屬性，因爲我們已經通過jQuery處理了它。

<a href="link1"> link 1 </a>

我測試過此上的jsfiddle，看看它是如何工作的。 jsFiddle

然後我注意到iframe在內容完全加載後閃爍。所以我添加了一個load()函數來修復閃爍，並且它工作得很好。看到這個jsFiddle

$("#menubar1 a").click(function(e) { 
     e.preventDefault(); 
     var src = $(this).attr('href'); 

     $('#iframe1').fadeOut(1000,function(){ 
      $('#iframe1').attr('src',src).load(function(){ 
       $(this).fadeIn(1000);  
      }); 
     }); 

});

來源

2013-11-05 01:03:51

這一個是正確的，雖然你可能想在返回false之前調用'e.preventDefault（）'' – lincolnk

Thanks @lincolnk。我試過它在jsfiddle和'返回false'工程沒關係。但認爲'e.preventDefault（）'是防止默認操作而不是濫用返回操作符的最好方法。：d –

-2

只是一個語法錯誤，大寫的.fadeOut（你寫的.FadeOut）。

$("#menubar1 a").click(function() { 
    $("#iframe1").fadeOut("slow"); 
    $("#iframe1").fadeIn("slow"); 
});

雖然我建議你做到以下幾點：

<html> 
<body> 
<div id="menubar1"> 
    <a href="#" id="link1"> link 1 </a> 
    <a href="#" id="link 2"> link 2 </a> 
    <a href="#" id="link 3"> link 3 </a> 
    <a href="#" id="link 4"> link 4 </a> 
</div> 

<iframe id="iframe1" name="iframe1" src="homepage.html" frameborder="0" > 
</iframe> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script> 
$("#menubar1 a").click(function() { 
    var linkId = this.id; // id of clicked a element 
    $("#iframe1").fadeOut("slow", function() {; // fade out iframe 
     document.getElementById("iframe1").src = linkId; // on completion of fade out - change iframe src attribute 
     $("#iframe1").fadeIn("slow"); //fade in iframe 
    }); 
}); 
</script> 
</body> 
</html>

這樣，你的iframe的內容不會在淡出前更改。

來源

2013-11-05 00:50:06 unclemeat

必須等待fadeOut才能完成，然後再執行下一步 – lincolnk

我似乎無法評論任何其他帖子 - 但我相信Mark S給出的答案將不起作用，因爲點擊鏈接會加載頁面在href中指出。 – unclemeat

lincolnk，你可能想改變你的評論。除非我錯了。另外，如果您現在查看我的帖子，您會看到我建議的方法，包括等待fadeOut函數完成。 – unclemeat

iframe淡入淡出/使用jQuery

回答

相關問題