2013-02-10 54 views
1

我有兩個鏈接,如果用戶點擊一個,與鏈接相關的文章將顯示在一個動畫中。如果用戶點擊另一個鏈接後他/她點擊了第一個,之前的動畫完成之前,他們的動畫將會發生衝突。我想使用.bind().unbind()函數來阻止用戶在其他鏈接的事件正在工作時點擊鏈接。但是當我解除某個事件時, t在動畫之後綁定到元素。.bind()和.unbind()無法正常工作

JS代碼:

$("a[href='#about-enamel']").click(function() { 
     $("a[href!='#about-enamel']").unbind("click"); 
     if ($("article[id='about-enamel']").attr('class') === 'visible') { 
      $("a[href!='#about-enamel']").bind("click"); 
      return 0; 
     } 
     else if ($("article[class='visible']").length) { 
      $("article[class='visible']").hide('drop', { easing: 'easeOutBack', direction: 'down' }, 500, function() { 
       $(this).attr('class', 'hidden'); 
       $("article[id='about-enamel']").show('drop', { easing: 'easeInBack', direction: 'up' }, 500, function() { 
        $(this).attr('class', 'visible'); 
        $("a[href!='#about-enamel']").bind("click"); 
       }); 
      }); 
     } 
     else { 
      $("article[id='about-enamel']").show('drop', { easing: 'easeInBack', direction: 'up' }, 500, function() { 
       $(this).attr('class', 'visible'); 
       $("a[href!='#about-enamel']").bind("click"); 
      }); 
     } 
    }); 
    $("a[href='#order']").click(function() { 
     $("a[href!='#order']").unbind("click"); 
     if ($("article[id='order']").attr('class') === 'visible') { 
      $("a[href!='#order']").bind("click"); 
      return 0; 
     } 
     else if ($("article[class='visible']").length) { 
      $("article[class='visible']").hide('drop', { easing: 'easeOutBack', direction: 'down' }, 500, function() { 
       $(this).attr('class', 'hidden'); 
       $("article[id='order']").show('drop', { easing: 'easeInBack', direction: 'up' }, 500, function() { 
        $(this).attr('class', 'visible'); 
        $("a[href!='#order']").bind("click"); 
       }); 
      }); 
     } 
     else { 

      $("article[id='order']").show('drop', { easing: 'easeInBack', direction: 'up' }, 500, function() { 
       $(this).attr('class', 'visible'); 
       $("a[href!='#order']").bind("click"); 
      }); 
     } 
    }); 

如果這個問題有其他解決方案,請通知我。

+0

我想你誤會了怎麼'bind'和'unbind'工作。您綁定一個事件 - 例如'$(「a [href ='#about-enamel']」)。click(function(){});' - 然後立即取消綁定它 - '$(「a [href!='#about-enamel' ] 「)解除綁定(」 點擊「);'。考慮在單擊鏈接時使用stop()(http://api.jquery.com/stop/)來清除動畫隊列,然後立即隱藏任何打開的「article」元素,然後再打開另一個。如果你可以發佈HTML,那麼更全面的答案可能會更加接近。 – james246 2013-02-10 21:15:34

+0

@ james246我在創建它之後沒有立即禁止該事件。我說當$(「a [href ='#about-enamel']」)點擊事件被觸發時,任何一個沒有#應該從click事件中禁用about-enamel href(!=符號)。 – Ramin 2013-02-10 21:25:21

+0

道歉,我沒有看到'!'·我仍然認爲你可以通過一個簡單的方式實現你的目標 - 只需一個單擊事件,它使用動畫打開一篇文章,但取消任何其他動畫進展。 – james246 2013-02-10 21:30:33

回答

1

下面是我放在一起的一個基本示例,演示如何使用stop()殺死所有正在進行的動畫,以便您可以在沒有衝突的情況下啓動另一個動畫。

http://jsfiddle.net/zFAY9/3/

+0

謝謝james246.it真棒。 – Ramin 2013-02-10 22:53:18

+0

沒問題,很高興幫助 – james246 2013-02-10 23:19:11