Javascript Jquery-将元素从列表滑动到另一个列表动画
我有两个列表,其中包含相同类型的元素,刚刚调整大小。 我有一个主列表,包含Javascript Jquery-将元素从列表滑动到另一个列表动画,javascript,jquery,list,Javascript,Jquery,List,我有两个列表,其中包含相同类型的元素,刚刚调整大小。 我有一个主列表,包含100x100左右imgages,第二个列表包含相同的图像,只是有一个.resize类打开,这使得25x25 我想做的是,将第一个列表中的一个元素滑动到第二个列表中,因此当它滑动时,它也会调整自身大小,直到与第二个列表中的元素匹配,第二个列表将自行移动,第一个列表也会移动(这类似于有人加入时的用户化身) 我的东西是这样的: (来源:) 您可以看到“我的网站”下的第一个列表和“我的网站”右侧的第二个列表 &
100x100
左右imgages,第二个列表包含相同的图像,只是有一个.resize
类打开,这使得25x25
我想做的是,将第一个列表中的一个元素滑动到第二个列表中,因此当它滑动时,它也会调整自身大小,直到与第二个列表中的元素匹配,第二个列表将自行移动,第一个列表也会移动(这类似于有人加入时的用户化身)
我的东西是这样的:
(来源:) 您可以看到“我的网站”下的第一个列表和“我的网站”右侧的第二个列表
<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>
这是怎么做到的呢?谢谢你的帮助!我想你可以这样做
var dstOffset=$('#target').offset();
var dstwheight=$(“#目标”).height();
var dstWidth=$(“#目标”).width();
$(“#源”)。设置动画({
“左”:dstOffset.left,
“top”:dstOffset.top,
“高度”:高度,
“宽度”:宽度
},“慢”);
#来源{
宽度:50px;
高度:50px;
位置:绝对位置;
排名:0;
左:0;
背景:黄色;
}
#目标{
宽度:10px;
高度:10px;
位置:绝对位置;
顶部:50px;
右:200px;
背景:红色;
}
如何做到这一点
是一个太宽泛的问题。你尝试过什么?什么部分给你带来了问题。创建一个包含足够基本css的演示也会有帮助。你能为我们提供css吗too@charlietfl我知道如何使用jQuery插件创建基本动画,但不知道元素如何滑入动画带有动画的容器(列表)。@AnisBoukhris添加了CSS。我将从获取offset()开始
的目标和当前位置,然后您就知道了动画的目的地。在动画的回调中,将新元素插入新列表并从第一个列表中删除。尝试至少在jsfiddle.net或其他代码共享站点的演示中启动该部分
#sites-left {
float: left;
}
#sites-right {
float: right;
}
.sites_title {
font-size: 18px;
font-weight: bold;
color: #e4b31e;
position: relative;
top: 15px;
}
.resize {
width: 25px;
height: auto;
opacity: 0.5;
}
.resize:hover {
opacity: 0.7;
}
#already_voted {
list-style: none;
margin-top: 15px;
}
#already_voted li {
margin-left: 15px;
display: inline;
}
.line {
width: 100%;
height: 1px;
border-bottom: solid 1px rgba(255, 255, 255, 0.1);
margin-top:10px;
clear: both;
}
.site {
width: 100px;
display: inline-block;
list-style: none;
margin-top: 20px;
margin-right: 3%;
}
.selected {
border-bottom: 10px solid rgba(255, 255, 255, 0.5);
}