2

私はこれに比較的慣れていないので、誰かが私を正しい方向に向けることができるかどうか疑問に思っていました！メニューリンクがクリックされたときのページ読み込みのいくつかの側面をアニメーション化しようとしています。

$("document").ready( function() {

      $('.page_box_fade').css("display", "none")        
      .fadeIn('300');

      $(".nav_image").click( function(){

            $('.page_box_fade').fadeOut('300');                                 
            document.location = $(this).parent().attr("href");

            return false;           
      });
});

このコードは正常に機能しているように見えます。リンク内に含まれている画像「.nav_image」をクリックすると、div「.page_box_fade」の内容がフェードし、同時にクリックされた「href」属性にリダイレクトされます。 .nav_imageの親リンク。300ミリ秒のフェードがあるので、リダイレクトする前にこれをスクリプトに含めて、フェードが実際にユーザーに見えるようにします。

$("document").ready( function() {

    $(".nav_image").click( function(){

            $('.page_box_fade').fadeOut('300');                                 
            setTimeout( "document.location = $(this).parent().attr('href')", 500 );

            return false;           
    });
});

setTimeoutが答えになると思いますが、私が思ったように使用すると、$（this）.parent（）。attr（'href'）は未定義になります。

これは私のhtmlの構造であり、単純なリンクです。

<a href="?id=0">
    <img class="nav_image" src="images/home.png" alt="home" />
</a>

これに関する助けをいただければ幸いです:)

4

3 に答える 3

4

href次のように、以前を保存できます。

$(function() {
  $(".nav_image").click( function(){
    $('.page_box_fade').fadeOut('300');                                 
    var href = $(this).parent().attr('href');
    setTimeout(function() { window.location.href = href; }, 500 );
    return false;           
  });
});

これにより、いくつかの変更が行われます。

  • "document"セレクター、使用$(document).ready()、または上記のショートカットには正しくありません。
  • また、に文字列を渡さないでくださいsetTimeout()。上記のような関数を直接使用してください。
  • コンテキストを設定していない限りthis、関数内で使用しないでください。使用しないと、リンクではなく、リンクになります（これが最終的には現在の問題です）。setTimeout()thiswindowclicked

別の方法は、次のように、顔を向けたときにリダイレクトすることです（ただし、500ミリ秒ではなく300ミリ秒でリダイレクトされます）。

$(function() {
  $(".nav_image").click( function(){                            
    var href = $(this).parent().attr('href');
    $('.page_box_fade').fadeOut('300', function() { 
      window.location.href = href; 
    });
    return false;           
  });
});
于 2010-11-08T18:13:33.893 に答える
1

アニメーションが完了したときに呼び出されるfadeOutのコールバック引数を使用する必要があります。

var link = this;
$('.page_box_fade').fadeOut('300', function() {
    window.location.href = $(link.parentNode).attr('href');
});
于 2010-11-08T18:15:56.723 に答える
0 
$(function() {

  var work = false;
  $(".nav_image").click( function(ev){

    if (work)
       return false;

    work = true;

    var _this = this;

    $('.page_box_fade').fadeOut('300', function() {
       setTimeout(function(){
          window.location.href = $(_this).parent().attr('href');
       }, 500 );
    });

    return false;

  });
});
于 2010-11-08T18:23:41.477 に答える