如何重现这种滑动效果？

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)设置活动对事件的$(this).parent()，不直接，因为它是在.IMG获取事件

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

3. 您可以让李自动增长，只是改变你要显示

我已经更新了你的提琴文本的宽度：

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