fancybox navigation arrows

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

I'm trying to implement a jquery animation for the navigation arrows that appear once a [grouped] item is opened up in fancyb开发者_Python百科ox. 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.

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.

I've tried using this tutorial for reference.

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

Thanks so much.

Try something like this (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);
    });
  }
});

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.