JQuery код для скользящего div (аккордеон)

Question

Я ищу хороший код jQuery, XHTML и CSS для достижения эффекта, как показано на следующем рисунке:

http://i48.tinypic.com/a3o4sn.jpg

Очевидно, что это статичное изображение, то, что должно произойти, - это текст, а прозрачный фон скрыт, и когда вы наводите курсор мыши на изображение, оно скользит вверх и снова вниз по маске.

Я думаю, что это аккордеон, кто-нибудь может указать мне правильное направление (или, может быть, вы видели другой сайт, который делает это)?

Answer 1

Я недавно использовал плагин jquery, который делает что-то очень похожее. Вы можете обнаружить, что плагин делает все, что вам нужно, или посмотрите на источник, чтобы увидеть, как достигается эффект вставки (хотя, конечно, есть несколько способов сделать что угодно).

Плагин называется Витрина

Его домашняя страница содержит больше информации, демонстрацию и учебные пособия

Наконец, в качестве дополнительной демонстрации, вот сайт, где я его использовал .

НТН

Answer 2

Вас может заинтересовать этот замечательный ресурс: Раздвижные коробки и подписи

DEMO

Answer 3

Мой подход к этому эффекту состоит в том, чтобы иметь div с overflow: hidden и прозрачный черный div с верхним полем, которое помещает его «за пределы» контейнера. «Используя .hover(), вы можете указать черному div, чтобы он скользил вверх, когда мышь находится над контейнером div и снова скользит, когда мышь уходит.

Markup:

<div id='container'>
   <div id='slider'>Some Text</div>
</div>

Стили:

div#container {
    height: 100px;
    width: 100px;
    overflow: hidden;
}

div#slider {
    width: 100px;
    height: 40px;
    margin-top: 100px;
    background: black;
}

А твой сценарий:

$('#container').hover (
   function () {
      $('#slider').css('margin-top', '60px'),
      $('#slider').css('margin-top', '100px');       
);

Я забываю, нужно ли вам ставить 60px в кавычках или нет, или если вам нужно передать 60 как целое число, поэкспериментируйте с ним, но, надеюсь, это поможет вам начать.