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

我在一个页面上有两个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>

我试图用一个“slidePanelItem”类来定位每个div。当点击链接时，我想检查一下.slidePanelItem上是否有一个“open”类。如果没有，div将设置动画以显示所有内容，并添加class.open。如果存在.open类，则div将设置关闭动画

我想不出如何让它正常工作。任何帮助都将不胜感激

试试这个

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

});

---

由于某些原因，面板将打开，但不会关闭。当链接被点击在一个.open的项目上时，我可以看到类切换，但是面板的动画将不会变为-150px。它保持在0px。有什么建议吗？我刚想出来。我改了。改成了。hasClass，现在可以用了。谢谢啊，我的错，对不起，如果您使用

.is（）

它应该有一个点。。像

。是（“.open”）

。。。但我想它已经对你起作用了……：）

$(document).ready(function () {

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

});