Question

我在悬停时为图片创建了叠加层。叠加层由<div>和覆盖整个图像的不透明度以及从底部向上滑动的小盒子组成。当鼠标离开图像时，所有东西都会恢复正常。

这一切都运行得很好，但我尝试添加一个complete:回调，底部的框只有在完成它的第一个slideUp动画后才会向下滑动防止它循环。

这是我到目前为止所尝试的内容，但它似乎没有做到这一点：

$('.overlay-wrapper').mouseenter(function(){

    // variables are all set here

    overlayBottom.slideUp({

        complete: function(){

            $('.overlay-wrapper').mouseleave(function(){

                $self.find('.overlay-bottom').slideDown();

            });
        }

    });

});

我确定为什么这不起作用，因为我在mouseleave完成后调用slideUp事件。

这是一个用于实时预览的JSFiddle模型：

http://jsfiddle.net/8HnPb/1/

有人可以说明我做错了什么吗？

Answer 1

尝试以下http://jsfiddle.net/8HnPb/3

$('.overlay-wrapper').mouseenter(function(){

    var $self = $(this);
    var overlay = $self.find('.overlay');
    var overlayBottom = $self.find('.overlay-bottom');
    var imageWidth = $self.find('img').width();

    overlay.stop().removeClass('active', 200).width(imageWidth);
    overlayBottom.slideDown();
    overlayBottom.width(imageWidth);

}); 

$('.overlay-wrapper').mouseleave(function(){
    var $self = $(this);
    $self.find('.overlay').stop().removeClass('active', 200);
    $self.find('.overlay-bottom').stop(true, false).slideUp('fast');
});

我将鼠标移出完整并添加了停止因此它不会循环。所以现在如果你的鼠标离开图像框，滑动将停止，然后从停止的任何位置向下滑动。

有关.stop() http://api.jquery.com/stop/

的更多信息

.slideUp（）完全不起作用

1 个答案: