显示（'幻灯片'）重复效果？

Question

我有一个隐藏的 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/

Answer 1

我会通过悬停事件和更改课程来做到这一点。我在这里假设你的一些 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 所必需的，以将其全部保存在一个整洁的包中。它允许我们将底部属性设置为标题元素。

我在.black 元素中添加了opacity: 0.5;，因此我们不必使用js。

对于.gallery-single-title，我删除了margin-top 并设置了

bottom: 0;
left:0;

无论是slideUp还是slideDown，这都会使标题元素上下滑动，但这并不重要，因为我们正在实现正确的效果。

这应该适合你了。