的fancybox导航箭头 [英] fancybox navigation arrows

问题描述

我试过了好几个小时来解决这个问题。我衷心AP preciate一些帮助。

I've tried for hours to resolve this issue. I would sincerely appreciate some help.

我想实施出现一次[分组]项目开辟了的fancybox导航箭头jQuery的动画。向左或向右导航箭头悬停在该划分对象＃的fancybox左或＃的fancybox右部分之后。在＃的fancybox右：举例来说，我已经通过设置-__ PX权：位于右箭头（定义为＃的fancybox - 右 - ICO），使箭头只是外面#fancyboxcontent的悬停跨度

I'm trying to implement a jquery animation for the navigation arrows that appear once a [grouped] item is opened up in fancybox. The left or right navigation arrows appear after hovering over the #fancybox-left or #fancybox-right portion that divides the object. For instance, I've positioned the right arrow (defined as #fancybox-right-ico) by setting "right: -__px" under #fancybox-right:hover span so that the arrow is just outside of #fancyboxcontent.

我想，这样＃的fancybox - 右 - ICO似乎从下#fancyboxcontent，而不是仅仅表现为它在默认情况下滑出使用jQuery的动画功能。

I want to use the jquery animation function so that the #fancybox-right-ico appears to slide out from under #fancyboxcontent instead of just appearing as it does by default.

我试过使用<一个href=\"http://tympanus.net/codrops/2009/11/30/beautiful-slide-out-navigation-a-css-and-jquery-tutorial/\"相对=nofollow>参考本教程。

我应该在哪里放置以下code在的fancybox文件，我应该怎么标注#navigation一个'，'#navigation>礼'和'A'？

Where should I place the following code in the fancybox files and how should I label '#navigation a', '#navigation > li', and '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);
  }
 );
});

太感谢了。

推荐答案

尝试这样的事情（演示）

$("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);
    });
  }
});

它不会因为hoverable区域需要重叠它...如果是下悬停不会工作从图像下滑出。

It doesn't slide out from under the image because the hoverable area needs to overlap it... if it was under, the hover wouldn't work.

这篇关于的fancybox导航箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！