jquery - 如何重现这种滑动效果？

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自动增长，只需​​改变你想要显示的文字的宽度

我已经更新了你的 fiddle :

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