Jquery для создания эффекта div

Question

Я пытаюсь создать функционал, похожий на этот сайт. где при нажатии на ссылку «Как это работает» он сдвигает div с некоторыми маркетинговыми материалами:

https://prescreen.com/?ui=logo

интересно, есть ли у вас подсказка о jQuery, который я могу использовать для этого эффекта.

Answer 1

Дэн из Prescreen здесь. Я помог написать тот изящный маленький контейнер, на который вы ссылаетесь.

Все на правильном пути, все довольно просто. Вот точная конфигурация перехода, которую мы использовали, чтобы показать и скрыть весь элемент:

//show the element
element.slideDown(1800, 'easeOutBounce');

//hide the element (note we sped up the hide to get it out of users way ASAP)
element.slideUp(800, 'easeOutExpo');

См:

http://api.jquery.com/slideDown/

http://api.jquery.com/slideUp/

Функциональность слайд-шоу внутри была сделана сначала путем настройки родительского «контейнера» со свойством CSS «overflow: hidden». Затем длинная цепочка слайдов в родительской обертке с идентификатором «slideTrack». Я думаю, что Дж. Смарт окончательно определил, как это сработало. Вот общая идея:

<style>
  #container {
    overflow:hidden;
  }
  .slideTrack {
    width: 10000px;
  }
  .slide {
    position: relative;
    float: left;
  }
  .slide1 {
    left: 0px;
  }
  .slide2 {
    left: 900px;
  }
  .slide3 {
    left: 1800px;
  }
</style>

<div id="container" style="overflow:hidden">
  <div id="slideTrack">
    <div class="slide" id="slide1"> slide 1 </div>
    <div class="slide" id="slide2"> slide 2 </div>
    <div class="slide" id="slide3"> slide 3 </div>
  </div>
</div>

Функция jQuery 'animate', http://api.jquery.com/animate/, была использована для анимации CSS-перехода. Использование - = и + = - удобный способ изменить значение css с шагом, а не с целым значением. Вот что мы использовали:

//move right 
$(".slide").animate({ left: '-=900px'}, 1000, 'easeOutExpo');
//move left 
$(".slide").animate({ left: '+=900px'}, 1000, 'easeOutExpo');

Ура, надеюсь, это сэкономит вам время и даст вам некоторые идеи.

Answer 2

Чтобы расширить ответ @ Стива, вы можете добавить тип замедления к вызову функции .slideToggle(), чтобы анимация выглядела так, как будто она отскакивает:

$('.toggledDiv').slideToggle('slow', 'easeOutBounce');

Для этого требуется включить плагин jQuery Easing: http://gsgd.co.uk/sandbox/jquery/easing/

Вот демоверсия: http://jsfiddle.net/ANFRD/1/

Answer 3

Использование функции jQuery slideToggle

РЕДАКТИРОВАНИЕ:

Вот пример того, как это можно сделать: jsFiddle

Answer 4

Пользовательский интерфейс JQuery предоставляет различные типы эффектов и имеет различные варианты замедления. Вы можете попробовать их по ссылке, и я предполагаю, что вы говорите об эффекте "отказов".

http://jqueryui.com/demos/effect/