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＆gt; 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);
    });
  }
});

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

fancybox导航箭头

1 个答案: