페이지의 일련의 요소 위치 지정을 변경해야합니다.

Question

애니메이션을 적용해야하는 페이지에 두 개의 div가 있습니다 (슬라이딩 패널 효과). 각 요소는 맨 아래 위치 0부터 시작합니다. div가 위쪽에서 아래쪽으로 움직 이도록하는 링크가 필요합니다. 200px; 다음은 HTML입니다. 나는 "slidePanelItem"의 클래스와 각 사업부를 대상으로하기 위해 노력하고있어

$(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");    
}); 
});   
}); 

:

<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를 내가 사용하고 있습니다. 링크를 클릭하면 .slidePanelItem에 "open"클래스가 있는지 확인하려고합니다. 존재하지 않으면 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"); 
     }); 
    }); 

});