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

});

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

1 个答案: