1

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

2 回答 2

5

这种方式应该有效。

  $("#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-05T01:03:51.177 回答
-2

Simply a syntax error with the capitalization of .fadeOut (you wrote .FadeOut).

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

Although I recommend you do the following:

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

This way the contents of your iframe will not change before the fadeOut.

于 2013-11-05T00:50:06.107 回答