0



我在尝试应用动画的按钮时遇到问题。

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

为了实现这一点，我有一个 div，其中有两个 a，它们彼此重叠。为什么有两个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

任何帮助，将不胜感激！

4

2 回答 2

0

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

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

于 2013-02-19T14:52:47.577 回答
0

你对自己太苛刻了。您所要做的就是重叠两个元素；背景和前景。通过更改背景的大小，您可以为按钮设置动画。

我完全重写了它。看看我的小提琴。

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

因为我正在使用该方法更改width悬停，似乎确实可以正常工作。animate()stop()

于 2013-02-19T14:06:07.217 回答