setTimeout with window.location和$（this）

我對這個比較陌生，想知道是否有人能指出我正確的方向！我正在尋找在單擊菜單鏈接時爲頁面加載的某些方面設置動畫。

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

此代碼似乎正常工作（ISH），當我點擊圖像「.nav_image」，其中包含一個鏈接中，它消失DIV「.page_box_fade」的內容，同時重定向到點擊.nav_image父鏈接的'href'屬性。由於有300毫秒的淡入淡出效果，我希望腳本在重定向之前包含此內容，以使用戶可以看到淡入淡出效果。

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

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

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

      return false;   
    }); 
});

我假設的setTimeout將是答案，但$（本）.parent（）。ATTR（ 'href' 屬性）中使用我的思維方式時，是不確定的。

這是我的HTML的結構，一個簡單的鏈接：

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

任何幫助將是非常讚賞:)

來源

2010-11-08 breakbeatkid

你只可以之前存儲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()函數內部，否則this將window，不是你的clicked鏈接（這是最終你目前的問題）。

另一種方法是，當你面對了（它會在300毫秒重定向雖然不是500毫秒），這樣只是重定向：

$(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-08 18:13:33

@downvoter - 保健評論？ – 2010-11-08 18:17:04

oooh真棒，這工作！非常感謝:) – breakbeatkid 2010-11-08 18:20:34

您需要使用淡出，回調的參數，它被稱爲當動畫完成：

var link = this; 
$('.page_box_fade').fadeOut('300', function() { 
    window.location.href = $(link.parentNode).attr('href'); 
});

來源

2010-11-08 18:15:56 lonesomeday

'this'在這種情況下會引用錯誤的元素，它將會是正在消失的'.page_box_fade'，而不是您點擊的'.nav_image'。 – 2010-11-08 18:17:32

@Nick謝謝，修正。 – lonesomeday 2010-11-08 18:21:22

$(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-08 18:23:41

setTimeout with window.location和$（this）

回答

相關問題