如何重现这种滑动效果？

Question

我正在学习jQuery，我一直试图重现这种效果： http ： //www.frenchtouchseduction.com/test-2.html

**编辑:(为了清楚起见：滑动的东西是我感兴趣的，不要介意“悬停在图片上的悬停圈”东西）

我甚至不确定我应该如何描述它：我的第一个猜测是“推拉门”，但显然，这是另一回事。

这是我到目前为止所做的：

 $(document).ready(function() { $("ul li .img").hover(function() { $(".active").removeClass("active"); $(this).addClass("active"); }); }) 

 * { margin: 0; padding: 0; } .wrapper { width: 700px; margin: 20px auto; } ul { width: 100%; overflow: hidden; font-size: 0; } ul li { display: inline-block; width: 100px; height: 100px; font-size: 10px; background: #F5F5F5; color: #000; font-size: 0; } .img { width: 100px; height: 100px; display: inline-block; } .texte { width: 100px; height: 100px; display: none; background: #F06; font-size: 18px; color: #000; vertical-align: top; } .active { width: 200px; } .active .texte { display: inline-block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <ul> <li class="active"> <div class="img"><img src="http://placehold.it/100x100"/></div> <div class="texte">1</div> </li> <li> <div class="img"><img src="http://placehold.it/100x100"/></div> <div class="texte">2</div> </li> <li> <div class="img"><img src="http://placehold.it/100x100"/></div> <div class="texte">3</div> </li> </ul> </div> 

这是我尝试的结果： http ： //jsfiddle.net/77Lrm/

不知何故，我无法弄清楚如何获得这种滑出/滑入行为。

我错过了什么？ 是否有任何特定的库我应该包括不重新发明轮子，还是我可以轻松编码的东西？

Answer 1

您的代码中有几个问题：

1. 您需要在事件的$(this).parent()上设置活动，而不是直接在$(this) ，因为它是.img获取事件

2. 如果要为该元素设置动画，则不能使用display:none 。

3. 您可以让LI自动增长，只需​​更改要显示的文本的宽度即可

我已经更新了你的小提琴：

http://jsfiddle.net/77Lrm/4/