Question

我对javascript或jquery没有技巧。所以我试图尽我所能来解决这个问题。

我现在正在使用jQuery 1.9.1。

我试图做的是在点击顶部图像时解压缩或取消堆叠一堆图像（当它再次被点击时必须重新打包）...

使用css：nth-child（）...

将图像定位在图像中

这是我对jQuery的尝试：

    $(document).ready(function(){

        var $profile = $('.profile');
        $profile.click(function(){

            $(this).toggleClass("active");
            $(".thumb").children().eq(1).animate({left:'150px'});
            $(".thumb").children().eq(2).animate({left:'150px'});
            $(".thumb").children().eq(3).animate({left:'150px'});
            $(".thumb").children().eq(4).animate({left:'150px'});
            $(".thumb").children().eq(5).animate({left:'150px'});
            $(".thumb").children().eq(6).animate({left:'150px'});
            $(".thumb").children().eq(7).animate({left:'150px'});
            $(".thumb").children().eq(8).animate({left:'150px'});
            $(this).siblings(".user-info").toggleClass("active");       

        });
    });

我已经尝试了三天现在几乎学习jquery来完成这项任务，如果有人能帮我，我会非常感激!!

Here is what it looks like

Here is an image to better illustrate

Answer 1

您可以通过以下方式实现这一目标：

HTML：

<div>
    <img src="http://rowanpereira.com/test/test/img/person1/1.jpg" alt="" class="stacked" />
    <img src="http://rowanpereira.com/test/test/img/person1/1.jpg" alt="" class="stacked" />
    <img src="http://rowanpereira.com/test/test/img/person1/1.jpg" alt="" class="stacked" />
    <img src="http://rowanpereira.com/test/test/img/person1/1.jpg" alt="" class="stacked" />
</div>

CSS：

div
{
    width: 100%;
    height: 80px;
    overflow: scroll-x;
}

img 
{
    width: 80px;
    height: 80px;
}
.stacked
{
    position: absolute;
}

.unstacked
{
    display: inline;
}

使用Javascript：

$(function() {
    $("img").hover(function () {
        $("img").animate().toggleClass("stacked", "unstacked");
    });
});

点击此处：http://jsfiddle.net/TdNz4/

这只是一个例子，当然你需要根据你的设计进行调整。

Jquery图像堆栈动画

1 个答案: