необычные навигационные стрелки

Question

Я часами пытался решить эту проблему.Я был бы искренне признателен за некоторую помощь.

Я пытаюсь реализовать анимацию jquery для стрелок навигации, которые появляются, когда элемент [grouped] открывается в fancybox.Стрелки навигации влево или вправо появляются после наведения курсора на область # fancybox-left или # fancybox-right, которая разделяет объект.Например, я поместил стрелку вправо (определенную как # fancybox-right-ico), установив «right: -__ px» в # fancybox-right: hover span, чтобы стрелка находилась вне # fancyboxcontent.

Я хочу использовать функцию анимации jquery, чтобы # fancybox-right-ico выскользнул из-под #fancyboxcontent, а не просто появлялся, как по умолчанию.

Я пытался использовать этот учебник для справки.

Где мне разместить следующий код в файлах 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);
    });
  }
});

Оно не выскользнет из-под изображения, потому что область перемещения должна перекрывать его ... если оно былониже, зависание не сработало.