修復按鈕

Question

if($('.click').one('click')){ 
     $('.click').click(function(){ 
      $('.mainContent').animate(
       {"height":"+=620px"}, 
       800, 
       'easeInBack'); 
      $('.eneButton').animate(
       { "top":"+=310px"}, 
       1500, 
       'easeInOutExpo'); 
      $('.eneButton').animate(
       {"left":"-=310px"}, 
       1500, 
       'easeInOutExpo') 
      $('.giardButton').animate(
       {"top":"+=620px"}, 
       2000, 
       'easeInOutExpo') 
      $('.giardButton').animate(
       {"left":"-=620px"}, 
       2000, 
       'easeInOutExpo'); 
      $('.click').off('click'); 
     }) 
    } 
    if ($('.close').one('click')){ 
     $('.close').click(function(){ 
     $('.content, .sec').fadeOut(250); 

      $('.eneButton').animate(
       {"left":"+=310px"}, 
       1500, 
       'easeInOutExpo') 
      $('.eneButton').animate(
       { "top":"-=310px"}, 
       1500, 
       'easeInOutExpo'); 

      $('.giardButton').animate(
       {"left":"+=620px"}, 
       2000, 
       'easeInOutExpo'); 
      $('.giardButton').animate(
       {"top":"-=620px"}, 
       2000, 
       'easeInOutExpo'); 

      $('.mainContent').animate(
       {"height":"-=620px"}, 
       3500, 
       'easeInBack'); 
      $('.click').on('click'); 
    }) 

    } 

動畫在兩種方式下都能正常工作，但我需要用戶可以在其關閉時再次重新啓動動畫。從代碼中你可以看到一個點擊並開始動畫，然後你選擇一個類別列表，你可以在窗口中點擊一個「X」來關閉類別列表，當你這樣做時，動畫再次開始直到所有看起來像是開始。現在，如果再次點擊它，動畫不會再啓動。

任何線索？

Answer 1

好，我找到了解決辦法是這樣的：

$(document).ready(function(){ 
    $('.click').live('click', function(){ 
     $('.mainContent').animate(
      {"height":"+=620px"}, 
      800, 
      'easeInBack'); 
     $('.eneButton').animate(
      { "top":"+=310px"}, 
      1500, 
      'easeInOutExpo'); 
     $('.eneButton').animate(
      {"left":"-=310px"}, 
      1500, 
      'easeInOutExpo'); 
     $('.giardButton').animate(
      {"top":"+=620px"}, 
      1500, 
      'easeInOutExpo'); 
     $('.giardButton').animate(
      {"left":"-=620px"}, 
      1500, 
      'easeInOutExpo'); 
     //remove the class .click when the animation is done 
     //so that the animation, even if you click wont start again 
     $('.click').removeClass('click'); 
    }); 


$('.close').live('click', function(){ 
    $('.content, .sec').fadeOut(250) 

     $('.giardButton').animate(
      {"left":"+=620px"}, 
      1500, 
      'easeInOutExpo'); 
     $('.giardButton').animate(
      {"top":"-=620px"}, 
      1500, 
      'easeInOutExpo'); 

     $('.eneButton').animate(
      {"left":"+=310px"}, 
      1500, 
      'easeInOutExpo'); 
     $('.eneButton').animate(
      { "top":"-=310px"}, 
      1500, 
      'easeInOutExpo'); 

     $('.mainContent').animate(
      {"height":"-=620px"}, 
      2750, 
      'easeInBack'); 
     //Add class .click to #nav ul li so that when the closing animation 
     //is done you can restart all from the begin 
     $('#nav ul li').addClass('click'); 
    }); 
}); 

正如你可以看到我已經刪除了。一（）函數和使用.live（），在第一個動畫我刪除結束（'click'）類來動畫所有動畫，並且在最後一個動畫結束時，關閉一個，當一切都關閉時，我再次用$（'＃nav ul li'）。addClass（'點擊'），以便點擊按鈕後，動畫可以從頭開始重新開始。