Orbit jQuery插件:如何淡化方向导航箭头?

时间:2013-05-09 06:25:17

标签: jquery css jquery-plugins fadein orbit

我试图让导航箭头仅在用户将鼠标悬停在“#featured”div或显示屏上时显示。到目前为止,我有以下代码可以完成这项工作,但非常突然:

$("#featured, div.slider-nav").hover(function(){
    $("div.slider-nav").animate({'opacity':'1.0'}, 400);},
function() {
    $("div.slider-nav").animate({'opacity':'0'}, 400);
});

.animate()函数中包含的时间仅用作延迟,与使用.animate()操作颜色在效果中淡化时不同(尽管jQuery需要单独的插件来设置颜色动画)。那么这种情况下导航箭头平滑淡出的最佳方法是什么?

1 个答案:

答案 0 :(得分:0)

您应该将悬停应用于包装器,这样您就不必单独包含导航。这样它就不会排队并开火两次。

同样使用mouseenter mouseleave并在动画前停止:

$(".orbit-wrapper").mouseenter(function(){
  $("div.slider-nav").stop().animate({'opacity':'1'}, 400);
}).mouseleave(function(){
 $("div.slider-nav").stop().animate({'opacity':'0'}, 400);
});