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才能将其保存在整齐的包装中。它允许我们将bottom属性设置为title元素。

我将opacity: 0.5;添加到.black元素，因此我们不必使用j。

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

bottom: 0;
left:0;

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

这应该适合你。

显示（'幻灯片'）对重复的影响？

1 个答案:

更新