Besoin de changer le positionnement d'une série d'éléments sur une page

Question

J'ai les 2 divs sur une page que j'ai besoin d'animer (un effet de panneau coulissant). J'ai chaque élément commençant par une position inférieure de 0. J'ai besoin d'un lien qui provoque l'animation de la div vers le haut: 200px; Voici le 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> 

Voici le jQuery J'utilise:

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

Je suis en train de cibler chaque div avec une classe de "slidePanelItem". Lorsque le lien est cliqué, je veux vérifier s'il existe une classe de "open" sur .slidePanelItem. S'il n'y en a pas, le div s'anime pour montrer tout le contenu, et la classe .open est ajoutée. S'il y a une classe de .open, alors la div s'anime fermée.

Je n'arrive pas à comprendre comment cela fonctionne correctement. Toute aide serait appréciée!

Answer 1

try this ..

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

}); 

ou d'une autre façon ...

$(document).ready(function() { 

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

});