jQuery UI显示盲目排队问题

我遇到了一个按钮的问题，我试图应用动画。

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

为了达到这个目的，我有一个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

任何帮助，将不胜感激！

来源

2013-02-16 Roy Dendro

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

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

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

因为我正在改变width与animate()方法悬停，stop()确实似乎正常工作。

来源

2013-02-19 14:06:07

虽然不完全，我试图达到的效果，你的技术动画的宽度，而不是使用jQuery-UI的秀（“盲”）功能确实有用。我在下面发布了我的最终代码。 – 2013-02-19 14:49:33

我用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

来源

2013-02-19 14:52:47

jQuery UI显示盲目排队问题

回答

相关问题