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

您的代码中存在一些问题：

您需要在活动的$(this).parent()上设置有效，而不是直接在$(this)，因为它是.img获取活动
如果要为该元素设置动画，则无法使用display:none。
您可以让LI自动增长，只需更改要显示的文字的宽度

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

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

如何重现这种滑动效果？

1 个答案: