＃標籤來觸發一個jQuery動畫

Question

我已經在對一些jQuery的過渡另一個問題獲得幫助早些時候我得到了我的網站可正常使用，但現在我需要深一點進入這個jQuery的轉變......

我需要根據寫在地址欄中的hashtag進行特定的效果/轉換。這是pckill由其他問題提供的代碼：

$('.nav').on('click', 'li', function(){ 
var id = $(this).data('id'); 

var breadcrumbs = document.getElementById('breadcrumbs'); 
breadcrumbs.innerHTML = 'IMGit &raquo; <span class="capitalize">' + id + '</span>'; 

var current = $('#inner').find('[data-page=' + id + ']'); 
if (current.hasClass('hidden')) 
{ 
    current.css('marginLeft', '-200%'); 
    $('#inner > div').not(current).animate(
     {marginLeft: '100%'}, 
     'fast', 
     function(){ 
      $('#inner > div').not(current).addClass('hidden'); 
      current.removeClass('hidden'); 
      current.animate({marginLeft: '0%'}, 'fast'); 
    }); 
} 
}); 

這是HTML：http://pastebin.com/pu7jmefC

比方說，例如，我鏈接有人http://mywebsite.com/index.php#remote，我希望用戶將被轉換爲與 jQuery到正確的div。上述方法與我擁有的菜單完美配合，但我希望能夠與某人分享網址，他們仍然可以將直接轉換爲正確的div。

我認爲上面的代碼需要一些改變，使它做我所追求的，但不幸的是，我在JavaScript/jQuery中並不擅長。

我想我們必須觸摸這裏的代碼：$('#inner > div').not(current)。

我知道我們有window.location.hash與hashtags一起工作，但我不知道如何將它用在上面的代碼中。

想法？

Answer 1

如果您只是需要在頁面加載時檢查散列並相應地執行某個操作，那非常簡單。首先你需要移動過渡到一個div到一個單獨的函數的邏輯，說transitionToDiv：

function transitionToDiv(id) { 
    var current = $('#inner').find('[data-page=' + id + ']'); 
    if (current.hasClass('hidden')) 
    { 
     current.css('marginLeft', '-200%'); 
     $('#inner > div').not(current).animate(
      {marginLeft: '100%'}, 
      'fast', 
      function(){ 
       $('#inner > div').not(current).addClass('hidden'); 
       current.removeClass('hidden'); 
       current.animate({marginLeft: '0%'}, 'fast'); 
     }); 
    } 
} 

並改變click事件（在你的問題的代碼）：

$('.nav').on('click', 'li', function() { 
    var id = $(this).data('id'); 

    var breadcrumbs = document.getElementById('breadcrumbs'); 
    breadcrumbs.innerHTML = 'IMGit &raquo; <span class="capitalize">' + id + '</span>'; 

    transitionToDiv(id); 
} 

現在，要基於地址哈希過渡到頁面加載的div，只需在頁面加載後的某個點添加這些行：

var id = window.location.hash.substr(1); 
transitionToDiv(id);