jquery - Orbit jQuery 插件 : How to fade in directional navigation arrows?

Question

我试图让导航箭头仅在用户将鼠标悬停在“#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 需要单独的插件来为颜色设置动画)。那么在这种情况下平滑淡入导航箭头的最佳方法是什么？

Answer 1

您应该在包装器上应用悬停，这样您就不必单独包含导航。这样它就不会排队并触发两次。

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

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