使用jquery在第二次點擊時反轉動畫

Question

我有三個信息框，希望用我已經編碼的特定動畫打開。我已經編碼了所有被點擊的地方，其他地方都關閉了，但是我似乎無法弄清楚的是如何在第二次點擊該名稱時關閉該框，並且我不知道爲什麼，但是當我嘗試切換事件不起作用。任何想法我怎麼能做到這一點？這裏是jQuery代碼：

$('.link').click(function(){ 
     $('#box').animate({ 
      marginLeft:"0px", 
      marginTop:"100px" 
      },500).addClass('navigation').animate({ 
      width:"260px", 
      height:"80px" 
     },500); 
     $('#box2').animate({ 
      marginLeft:"100px", 
      marginTop:"0px", 
      width:"60px", 
      height:"23px" 
      },500).removeClass('navigation'); 
     $('#box3').animate({ 
      marginLeft:"200px", 
      marginTop:"0px", 
      width:"60px", 
      height:"23px" 
      },500).removeClass('navigation') 
    });  
    $('.link2').click(function(){ 
     $('#box2').animate({ 
      marginLeft:"0px", 
      marginTop:"100px" 
      },500).addClass('navigation').animate({ 
      width:"260px", 
      height:"80px" 
     },500); 
     $('#box').animate({ 
      marginLeft:"0px", 
      marginTop:"0px", 
      width:"60px", 
      height:"23px" 
      },500).removeClass('navigation'); 
     $('#box3').animate({ 
      marginLeft:"200px", 
      marginTop:"0px", 
      width:"60px", 
      height:"23px" 
      },500).removeClass('navigation'); 
    }); 
    $('.link3').click(function(){ 
     $('#box3').animate({ 
      marginLeft:"0px", 
      marginTop:"100px" 
      },500).addClass('navigation').animate({ 
      width:"260px", 
      height:"80px" 
     },500); 
     $('#box2').animate({ 
      marginLeft:"100px", 
      marginTop:"0px", 
      width:"60px", 
      height:"23px" 
      },500).removeClass('navigation'); 
     $('#box').animate({ 
      marginLeft:"0px", 
      marginTop:"0px", 
      width:"60px", 
      height:"23px" 
      },500).removeClass('navigation');  
    }); 

這裏是一個要的jsfiddle使其更加明確：http://jsfiddle.net/Unphr/11/

Answer 1

您可以做出更一般的處理程序，這個過程中，如果你在你的DOM做一個小的重命名。

以下HTML塊的重要補充是box類已添加到所有盒子容器中。

HTML

<div id="container"> 
    <div id="box1" class="box" align="center"> 
     <div id="link1" class="link"><a> Info </a></div> 
    </div> 
    <div id="box2" class="box" align="center"> 
     <div id="link2" class="link"><a> Links </a></div> 
    </div> 
    <div id="box3" class="box" align="center"> 
    <div id="link3" class="link"><a> More </a></div> 
    </div> 
</div> 

以下JS本質上是你的代碼重構不依賴於每個box具體定義動畫。爲了做到這一點，它利用jQuery .data()方法將信息存儲在DOM中以用於後面的使用（在這種情況下，框的左邊距）。

JS

$('.box').click(function() { 
    // Get the associated box 
    var box = $(this).closest('.box'); 
    // Get the other boxes 
    var otherBoxes = $('.box').not(box); 
    // If the box is already active 
    if (box.hasClass('active')) { 
     // Animate the box out 
     animateBoxOut(box); 
    } else { 
     // Get the original left margin 
     var marginLeft = box.css('margin-left'); 
     // Store the original left margin 
     box.data('marginLeft', marginLeft); 
     // Animate the box in 
     animateBoxIn(box); 
     // Animate the other boxes out 
     otherBoxes.each(function(index, element) { 
      animateBoxOut(element); 
     }); 
    } 
}); 

function animateBoxIn(box) { 
    // Animate the box in 
    $(box).addClass('active').animate({ 
     marginLeft:"0px", 
     marginTop:"100px" 
    },500).animate({ 
     width:"260px", 
     height:"80px" 
    }); 
} 

function animateBoxOut(box) { 
    // Get the element's stored left margin 
    var marginLeft = $(box).data('marginLeft'); 
    // Animate the box out 
    $(box).animate({ 
     marginLeft:marginLeft, 
     marginTop:"0px", 
     width:"60px", 
     height:"23px" 
    },500).removeClass('active'); 
} 

DEMO