Question

我有两个包含相同类型元素的列表，只是调整大小。我有主列表，其中包含100x100左右 imgages ，第二个列表包含相同的图片，只有一个.resize类，这使得{{1} }

我想要做的是，将第一个列表的元素滑动到第二个列表，这样当它滑动时，它也会自行调整大小，直到它在第二个列表中匹配，第二个列表将自行调整，并且第一个列表（当有人加入时，这类似于stackoverflow chat个用户头像。

这就是我的观点：

img http://gyazo.com/a2f67205664e3a47f92e488af1fac60d.png

您可以看到“我的网站”下的第一个列表和“我的网站”右侧的第二个列表。

25x25

CSS：

        <section>
            <div id="sites-left">
                <span class="sites_title">My sites</span>
            </div>
            <div id="sites-right">
                <ul id="already_voted">
                    <li>
                        <img src="img/blabla.png" class="resize" data-toggle="tooltip" data-placement="bottom" title="Available in 6 hours"/>
                    </li>
                    <li>
                        <img src="img/blabla.png" class="resize" />
                    </li>
                    <li>
                        <img src="img/blabla.png" class="resize" />
                    </li>
                    <li>
                        <img src="img/blabla.png" class="resize" />
                    </li>
                    <li>
                        <img src="img/blabla.png" class="resize" />
                    </li>
                </ul>
            </div>
            <div class="line"></div>
        </section>
        <ul id="sites">
            <li class="site">
                <img src="img/blabla.png" />
            </li>
            <li class="site">
                <img src="img/blabla.png" />
            </li>
            <li class="site">
                <img src="img/blabla.png" />
            </li>
            <li class="site">
                <img src="img/blabla.png" />
            </li>
            <li class="site">
                <img src="img/blabla.png" class="selected"/>
            </li>
        </ul>

如何做到这一点？谢谢你的帮助！

Answer 1

我想你可以做点像

＆＃13;

var dstOffset = $('#target').offset();
var dstHeight = $('#target').height();
var dstWidth = $('#target').width();

$("#source").animate({
    "left": dstOffset.left, 
    "top": dstOffset.top,
    "height": dstHeight,
    "width": dstWidth
}, "slow");

＆＃13;

#source {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    background: yellow;
}

#target {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 50px;
    right: 200px;
    background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="source"></div>
<div id="target"></div>

＆＃13;

Jquery - 从列表到另一个列表动画的幻灯片元素

1 个答案: