Javascript iframe使用jQuery淡出/淡入_Javascript_Jquery_Html

Javascript iframe使用jQuery淡出/淡入

javascript jquery html

Javascript iframe使用jQuery淡出/淡入,javascript,jquery,html,Javascript,Jquery,Html,我需要一个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="if

我需要一个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>


$（“#菜单1 a”）。单击（函数（）{
美元（“#iframe1”）。淡出（“缓慢”）；
美元（“#iframe1”）.FadeIn（“慢”）；
});

只是一个大写为.fadeOut的语法错误（您编写了.fadeOut）

尽管我建议您执行以下操作：

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


$（“#菜单1 a”）。单击（函数（）{
var linkId=this.id；//单击的元素的id
$（“#iframe1”）.fadeOut（“slow”，function（）{；//fade out iframe
document.getElementById（“iframe1”）.src=linkId；//淡出完成时-更改iframe src属性
$（“#iframe1”）.fadeIn（“slow”）；//在iframe中淡入
});
});

这样，iframe的内容在淡出之前不会更改。

这种方式应该可以工作

  $("#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>

首先更改iFrame的src属性，然后使用.FadeIn（）？代码中没有任何地方告诉iframe更改src。只是淡入淡出。这就是问题所在吗？你看不到淡入淡出？必须等待淡出完成，然后再执行下一步。我似乎无法对任何其他帖子发表评论-但我相信Mark S给出的答案不会起作用，因为点击链接将加载href.lincolnk中指示的页面，你可能想更改你的评论。除非我错了。另外，如果您现在查看我的帖子，您将看到我建议的方法，包括等待淡出函数完成。@aruu您需要在

fadeOut（）

回调期间调用

fadeIn（）

。目前，您将遇到与@codeSpy相同的问题。另外，将iframe src属性设置为a.id也不会有任何用处。@lincolnk如果您阅读了我也更改过的html，您将看到a元素的id是先前在href中的url。如果您只是在a元素中使用href，则单击这些元素时会重定向到该页面。现在我将更改fadeIn-很好，谢谢。虽然您可能希望在

返回false之前调用e.preventDefault（）
谢谢@lincolnk。我已经在jsfiddle上试用过了，returnfalse
可以正常工作。但是请考虑e.preventDefault（）是防止默认操作而不是滥用返回运算符的最佳方法：D
<a href="link1"> link 1 </a>

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

 });