Question

我无法使用按钮来尝试应用动画。

我试图创建的效果是，当用户鼠标熄灭时，具有白色边框和透明背景的按钮在从左到右悬停时填充白色背景颜色并从左到右再次清除。同时字体颜色也变为可读颜色。

为了达到这个目的，我有一个div，其中两个a位于彼此的顶部。为什么两个元素？因此，用户可以点击顶部/显示的任何一个。

HTML：

<div class="block-button"> <a href="#" class="first">Click me</a>
<a href="#" class="second"></a>

CSS

.block-button .first {
z-index: 8;
color: #fff;
}

.block-button .second {
z-index: 7;
background-color: white;

}

的jQuery

 //Buttons
$("a.second").hide();
$(".block-button").each(function () {
    $(this).hover(function (e) {
        $(this).find("a.second").show("blind", {
            direction: "left",
            easing: 'easeOutCubic'
        },500, function () {
           //Callback
        });
    }, function (e) {
        $(this).find("a.second").hide("blind", {
            direction: "right",
            easing: 'easeOutCubic'
        }, 500, function () {
            //Callback
        });
    });
});

虽然我在处理盲动画的排队时遇到了麻烦。通常我会用jQuery.stop（）来解决这个问题，但目前它还没有正常工作。

当我禁用停止时，自然所有的动画都会堆叠，所以不断的悬停/不悬停会让动画反复重复。

当我启用停止时，当你仍然动画时再次输入元素时（你可以在动画函数中使用高持续时间时清楚地看到这一点），最后一个动画没有被正确调用。

有点难以解释，但我认为这些jFiddles非常清楚。

停止启用：jsFiddle here

停止停用：jsFiddle here

任何帮助将不胜感激！

Answer 1

你在自己身上做得太难了。你所要做的就是重叠两个元素;背景和前景。通过更改背景的大小，您可以为按钮设置动画。

我完全重写了它。 Check out my fiddle

使用position: absolute;和position: relative;我重叠了两个元素。如果您想使用具有不同文本的多个按钮，则会保留动态宽度。

由于我正在使用width方法更改animate()悬停，stop()似乎确实正常工作。

Answer 2

我使用Tim在他的回答中提出的技术达到了我想要的效果。动画背景跨度的宽度似乎可以解决问题！

使用Javascript：

$('a.btn-pretty').hover(function(e) {
$(this).children('span.background').stop().animate({
    'width': $(this).width()
}, 300,function(){
    $('span.background').css({'right':'0','left':'auto'});   
});
}, function(e) {
$(this).children('span.background').stop().animate({
    'width': 0
}, 300,function(){
     $('span.background').css({'left':'0','right':'auto'}); 
});
});

您可以看到jsFiddle here

jQuery UI Show盲目排队问题

2 个答案: