Конфликт с Quicksand

Question

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

До сих пор я это установить: http://jsfiddle.net/gnnSB/

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

Теперь посмотрим на этот пример: http://jsfiddle.net/gnnSB/1/

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

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

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

Edit: Есть ли способ, чтобы добавить несколько улучшений? Я пытаюсь включить fancybox.

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

Answer 1

Это то, что вам нужно? Edit: RefactoredFiddle link

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

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