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

jQuery 経由で処理したため、target 属性を削除できるようになりました。

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

これをjsfiddleでテストして、どのように機能するかを確認しました。jsフィドル

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 に答える