Конфликт с Зыбучим Песком
Я пытаюсь реализовать простой эффект наведения, чтобы при наведении на каждый проект описание скользило справа.
Пока что у меня есть эта настройка: 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);
});
}