jQuery слайд / подпрыгнуть справа от наведения - PullRequest
Новая
       2

jQuery слайд / подпрыгнуть справа от наведения

0 голосов
/ 28 августа 2011

Впервые в jQuery, но пытаюсь это выяснить.

У меня есть список ящиков с контентом. Когда мы наведем курсор на каждое поле, div будет скользить справа с подробной информацией (дизайнеру также нужен эффект «отскока») и скрываться при наведении мыши.

У меня есть доступ к jQueryUI уже в проекте.

Вот что у меня есть:

HTML для каждого поля 

<div class="tool_master show">
    <div class="tool_hover"> Hover information here  </div>
    <div class="tool_box" > Content here    </div>
</div>

CSS 

.tool_box {
    height:100px;
    width:460px;
    position:relative;
    }
.tool_hover {
    height:100px;
    width:460px;
    background:#525051;
    position:absolute;
    z-index:100;
    display:none;
}

Я создал скрипт jquery для отображения / скрытия, который работает 

$(".show").hover(function(){
        $(this).closest("div").find(".tool_hover").toggle();
    }, function(){
       $(this).closest("div").find(".tool_hover").toggle();
    });

Это выполняет работу, но не обеспечивает "опыта", которого хочет дизайнер.

Что нужно сделать, это быстро скользить вправо и, возможно, иметь эффект отскока. На выходе сдвиньте вправо. Я не очень хорошо разбираюсь в анимации jquery.

Может кто-нибудь мне помочь?

Заранее спасибо!

1 Ответ

3 голосов
/ 28 августа 2011

То, что вы хотите, это animate - замените ваш переключатель на animate и введите параметры для (свойства, длительность, замедление, функция обратного вызова).

Чтобы это работало с вашим кодом, вам нужно изменить / добавить несколько вещей. Во-первых, удалите display: none из вашего tool_hover - вместо этого мы спрячем его, поместив его за пределы поля .show, а затем установим переполнение .show скрытым.

На ваш CSS: 

.show {
     overflow:hidden; 
     position:relative; /* Otherwise the absolute positioned child element ignores overflow */
}
.tool_hover {
    z-index: 0; /* Take precedence over .tool_box */
    left: 500px; /* Starting position is outside .show , effectively hidden */
}
.tool_box {
    z-index: 1; /* So hover will cover this box */
}

Далее мы хотим заменить вашу функцию переключения на animate. Когда вы наведите курсор мыши на прямоугольник, мы скажем классу .tool_hover, чтобы он вернулся, установив его левую позицию обратно в 0. Просто замените первый .toggle () на: 

...
.animate({
    'left' : '0px'},
    'slow');

и второй переключатель () с: 

...
.animate({
    'left' : '0px'},
    'slow');

Вот jsfiddle для демонстрации

...