Javascript 与流沙的冲突

我正在尝试实现一个简单的悬停效果，所以当我悬停在每个项目上时，说明会从右侧滑入

到目前为止，我已经完成了以下设置：

在这种情况下，请注意，当您将鼠标悬停在描述上时，描述不会滑入，但过滤效果良好

现在，看一看这个例子：

在这里，描述确实滑入，但过滤不起作用，因为我取出了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'
                });
    };

---

这是你需要的吗编辑：重构

您需要为quicksand添加另一个配置（

增强功能

），其中将放置悬停功能：

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

---

这是你需要的吗编辑：重构

您需要为quicksand添加另一个配置（

增强功能

），其中将放置悬停功能：

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

---

如果您的意思是将

$

的每个实例更改为

jQuery

，我尝试过，但没有任何区别：更新的答案，我最初的想法是应该通过

$来解决。noConflict（）

有没有办法通过在“hovers”变量下面设置另一个变量来添加另一个增强功能？我正在尝试合并fancybox。我相信是的，我会更新我的答案，因为我刚到这里工作：）你能帮我摆弄一下并用必要的资源更新吗？当然，这里是：我在html中添加了fancybox脚本和一些链接，其中包含一类

单幅图像

。如果您的意思是将

$

的每个实例更改为

jQuery

，我尝试过，但没有任何区别：更新的答案，我最初的想法是应该通过

$.noConflict（）来解决

有没有办法通过在“hover”变量下面设置另一个变量来添加其他增强功能？我正在尝试合并fancybox。我相信是的，我会更新我的答案，因为我刚刚来到这里工作：）你能帮我摆弄一下并用必要的资源进行更新吗？当然，这里是：我添加了fancybox脚本和html中的一些链接，其中包含一类

单幅图像

。