需要改变页面上的一系列元素的位置

Question

我有一个页面上的2个div，我需要动画（滑动面板效果）。我有每个元素以0的底部位置开始。我需要有一个链接，它会导致div向上移动到底部：200px;这是HTML。

<div class="slidePanelItem">  
<a href="#slidePanelWrapper" class="slidePanelLink"><img src="/images/temp/gscookiesFPO.png" alt="gscookiesFPO" /></a> 
<div class="slidePanel"><img src="/images/temp/gscookiescontentFPO.gif" alt="gscookiescontentFPO"/></div> 
</div> 

<div class="slidePanelItem">  
<a href="#slidePanelWrapper" class="slidePanelLink"><img src="/images/temp/gscookiesFPO.png" alt="gscookiesFPO" /></a> 
<div class="slidePanel"><img src="/images/temp/gscookiescontentFPO.gif" alt="gscookiescontentFPO"/></div> 
</div> 

这里是我使用jQuery：

$(document).ready(function(){ 
$(".slidePanelItem").each(function(){ 
$(".slidePanelLink").click(function(){ 
if($('.slidePanelItem').hasClass("open")) 
$(this).find('.slidePanelItem').animate({bottom: "-150px"}, 1000).toggleClass("open"); 
else 
$(this).find('.slidePanelItem').animate({bottom: "0px"}, 1000).toggleClass("open");    
}); 
});   
}); 

我努力的目标与类 “slidePanelItem” 的每一个DIV。当链接被点击时，我想检查是否在.slidePanelItem上有一类“打开”。如果没有，则div动画显示所有内容，并添加类.open。如果有一类.open，则div动画关闭。

我不知道如何让这个工作正常。任何帮助，将不胜感激！

Answer 1

试试这个..

$(document).ready(function() { 

    $(".slidePanelItem .slidePanelLink").click(function() { 
     var slidePanelItem = $(this).closest('.slidePanelItem'); 
     if (slidePanelItem.is(".open")) { 
      slidePanelItem.animate({ 
       bottom: "-150px" 
      }, 1000).toggleClass("open"); 
     } else { 
      slidePanelItem.animate({ 
       bottom: "0px" 
      }, 1000).toggleClass("open"); 
     } 
    }); 

}); 

或另一种方式......

$(document).ready(function() { 

    $(".slidePanelItem .slidePanelLink").click(function() { 
     $(this).closest('.slidePanelItem').animate({ 
      bottom: (slidePanelItem.is(".open"))?"-150px":"0" 
     }, 1000, function(){ 
      $(this).toggleClass("open"); 
     }); 
    }); 

});