Конфликт с Зыбучим Песком

Я пытаюсь реализовать простой эффект наведения, чтобы при наведении на каждый проект описание скользило справа.

Пока что у меня есть эта настройка: http://jsfiddle.net/gnnSB/

В этой скрипке обратите внимание, что описания не скользят при наведении на них мышью, но фильтрация работает хорошо.

Теперь взгляните на этот пример: http://jsfiddle.net/gnnSB/1/

Здесь описания скользят, но фильтрация не работает, потому что я отключил функцию Quicksand (показано ниже).

Мне нужно, чтобы оба они работали вместе. Возник конфликт, и мне интересно, сталкивался ли кто-нибудь с подобным. Это простое исправление или мне нужно прибегнуть к другому решению?

плывун

$(function() {

    var time_effect = 400;
    var effect_name = 'easeOutQuart';

    $('.all').quicksand( $('.everything article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      });

    $('.filter-all').click(function(e) {
      $('.all').quicksand( $('.everything article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      });
      $('.filter a').removeClass('selected');
      $(this).addClass('selected');
      e.preventDefault();
    });

    $('.filter-web').click(function(e) {
      $('.all').quicksand( $('.web article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      });
      $('.filter a').removeClass('selected');
      $(this).addClass('selected');
      e.preventDefault();
    });

    $('.filter-print').click(function(e) {
      $('.all').quicksand( $('.print article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      });
      $('.filter a').removeClass('selected');
      $(this).addClass('selected');
      e.preventDefault();
    });
  });

Наведения курсора

$('.thumbnail').hover(function () {
    $('.description', this).stop().animate({
      right: 0
    }, 50);
  }, function () {
    $('.description', this).stop().animate({
      right: -280
    }, 50);
  });

Изменить: Есть ли способ добавить несколько улучшений? Я пытаюсь включить Fancybox.

// Fancybox
    var fbox = function() {
                $("a.single-image").fancybox({
                    'transitionIn'   : 'none',
                    'transitionOut'  : 'none',
                    'overlayColor'   : '#000',
                    'overlayOpacity' : '0.6'
                });
    };

1 ответ

Решение

Это то, что тебе надо? Изменить: Рефакторированная ссылка Fiddle

Вам нужно добавить еще один конфиг (enhancement) для зыбучих песков, где вы поместите функции наведения:

enhancement: function() {
              $('.thumbnail').hover(function () {
                    $('.description', this).stop().animate({
                      right: 0
                    }, 50);
                  }, function () {
                    $('.description', this).stop().animate({
                      right: -280
                    }, 50);
                  });
        }
Другие вопросы по тегам