javascript - iframe 使用 jQuery 淡出/淡入

Question

我需要一个 iframe 来淡出旧页面，然后在用户单击各个链接之一时淡入新页面，但我无法让代码正常工作。只是想知道你是否能看出我错在哪里。

<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>

Answer 1

这个方法应该可行。

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

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

您现在可以删除目标属性，因为我们已经通过 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);    
          });
      });

 });