我正在尝试实现一个简单的悬停效果,因此当我将鼠标悬停在每个项目上时,描述会从右侧滑入。
到目前为止,我已经设置好了:http: //jsfiddle.net/gnnSB/
在那个小提琴中,请注意,当您将鼠标悬停在描述上时,描述不会滑入,但过滤效果很好。
现在,看看这个例子:http: //jsfiddle.net/gnnSB/1/
在这里,描述确实滑入,但过滤不起作用,因为我取出了流沙功能(如下所示)。
我需要这两者一起工作。有冲突,我想知道是否有人经历过类似的事情。这是一个简单的解决方案还是我需要求助于其他解决方案?
流沙
$(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'
});
};