JQuery плагин клон

Question

Существуют ли плагины jQuery, которые могут сделать что-то похожее на это: Acer Site ?

У меня есть клиент, которому нужна эта функциональность, и незнание того, что она даже называется, означает, что я не могу найти ее в Google, и мой javascript недостаточно хорош для ее клонирования.

Answer 1

Вы имеете в виду элементы, которые скользят вправо? Вы можете просто использовать метод animate. Размещайте элементы div рядом друг с другом, где начальная ширина элементов слева равна нулю. Чтобы показать блок, вы анимируете элемент с помощью элемента, а затем показываете содержимое внутри него.

Пример:

<style type="text/css">

.slideBox { float: left; margin: 2px; width: 0; height: 200px; background: #eee; }
.slideBox .content { display: none; margin: 10px; background: #ccc; }
#first { width: 100px; }
#first .content { display: block; }

</style>

<script type="text/javascript">

$(function(){
  $('#first').click(function(){
    $('#second').animate(
      { width: '100px' },
      {complete:function(){ $('#second .content').css('display','block'); }}
    );
  });
  $('#second').click(function(){
    $('#third').animate(
      { width: '100px' },
      {complete:function(){ $('#third .content').css('display','block'); }}
    );
  });
  $('#third').click(function(){
    $('#fourth').animate(
      { width: '100px' },
      {complete:function(){ $('#fourth .content').css('display','block'); }}
    );
  });
});

</script>

<div class="slideBox" id="fourth"><div class="content">fourth</div></div>
<div class="slideBox" id="third"><div class="content">third</div></div>
<div class="slideBox" id="second"><div class="content">second</div></div>
<div class="slideBox" id="first"><div class="content">first</div></div>