показать («слайд») эффект на повтор? - PullRequest
Новая
       52

показать («слайд») эффект на повтор?

0 голосов
/ 09 июня 2011

У меня есть скрытый div, который я хотел бы скользить вверх при наведении на другой div. 

$('.gallery-single a').mouseenter(function(){
    $('.gallery-single-title', this).show('slide', { direction: 'down' }, 1000);
    $('.black', this).css({ opacity: 0 });

});

Теперь, когда я наведите курсор мыши, действие слайда происходит при повторении по какой-то причине, я хотел бычтобы он скользил вверх только один раз.Буду признателен за любую помощь.

http://jsfiddle.net/cCTpd/2/

1 Ответ

2 голосов
/ 09 июня 2011

Я бы сделал это с событием hover и изменением класса. Я предполагаю, что некоторые из вашей структуры HTML здесь. Я мог бы ответить немного лучше, если бы видел это. 

$('.gallery-single a').hover(
    function() {
        if(!$(this).hasClass('slid')) {
            $(this).find('.gallery-single-title').slideUp(1000);
            $(this).find('.black').css({ opacity: 0 });
            $(this).addClass('slid');
        } 
    }, 
    function() {
        $(this).find('.gallery-single-title').slideDown(1000);
        $(this).find('.black').css({ opacity: 1 });
        $(this).removeClass('slid');
    }
);

Обновление

Вот обновленный код, чтобы он вел себя так, как вам нужно.

http://jsfiddle.net/YJaM5/7/

В приведенном выше javascript есть только одно изменение: 

$(this).find('.black').animate({ opacity: .5 });

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

Все остальные изменения в CSS 

.gallery-single {
    display:inline-block; 
    margin: 12px; 
    background:#333;
    width: 300px; 
    height:200px;
    position:relative;
}

.gallery-single img { border:none; }

.black {
    background-color:#000000;
    width:300px;
    height:200px; 
    position:absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
}

.gallery-single-title {
    font-family: 'ContinuumLightRegular', Helvetica, Arial, sans-serif;
    font-weight:bold;
    font-size: 18px;
    padding: 5px 5px 0 5px;
    width:290px;
    height:60px; 
    bottom: 0;
    left:0;
    overflow:hidden;
    color: white;
    background:#00b9e1;
    position:absolute;
    display:none;
}

Позвольте мне немного объяснить. position:relative; необходим для .gallery-single, чтобы хранить все в аккуратной упаковке. Это позволяет нам установить свойство bottom для элемента title.

Я добавил opacity: 0.5; к элементу .black, чтобы нам не приходилось использовать js.

Для .gallery-single-title Я удалил margin-top и установил 

bottom: 0;
left:0;

Это будет перемещать элемент заголовка вверх и вниз независимо от slideUp или slideDown, но это не имеет значения, поскольку мы достигаем правильного эффекта.

Это должно работать для вас сейчас.

...