花式框导航箭头

Question

我已经尝试了几个小时来解决这个问题。我真诚地感谢一些帮助。

我正在尝试为在fancybox 中打开[分组] 项目后出现的导航箭头实现jquery 动画。将鼠标悬停在分割对象的#fancybox-left 或#fancybox-right 部分后，会出现左或右导航箭头。例如，我通过在#fancybox-right:hover span 下设置“right: -__px”来定位右箭头（定义为#fancybox-right-ico），这样箭头就在#fancyboxcontent 之外。

我想使用 jquery 动画功能，以便 #fancybox-right-ico 看起来从 #fancyboxcontent 下方滑出，而不是像默认情况下那样显示。

我已经尝试使用this tutorial 作为参考。

我应该将以下代码放在 fancybox 文件中的什么位置以及如何标记“#navigation a”、“#navigation > li”和“a”？

$(function() {

 $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

 $('#navigation > li').hover(
  function () {
   $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
  },
  function () {
   $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
  }
 );
});

非常感谢。

Answer 1

尝试这样的事情 (demo)：

$("a").fancybox({
  onComplete: function() {
    $('#fancybox-left-ico, #fancybox-right-ico').css({
      opacity: 0
    });
    $('#fancybox-left, #fancybox-right').hover(function(e) {
      var enter = (e.type === "mouseenter"),
        dir = ($(this).is('#fancybox-left')) ?
          { left : (enter) ? '-30px' : 0 }:
          { right: (enter) ? '-30px' : 0 };
      dir.opacity = (enter) ? 1 : 0;
      $(this).find('span').stop().animate(dir, 400);
    });
  }
});

它不会从图像下方滑出，因为可悬停区域需要与其重叠......如果它在下方，悬停将不起作用。