如何应用jQuery流沙（排序）而不会丢失基于jQuery的投资组合hover？

当使用jQuery应用quicksand（一个用于排序列表的脚本）时，我发现我丢失了我的投资组合中的列表项。

在有人对列表进行排序后，如何让我的列表保持hover状态？

问题出在： http ： //digitalstyle.co/portfolio.html

流沙代码

// Custom sorting plugin (function($) { $.fn.sorted = function(customOptions) { var options = { reversed: false, by: function(a) { return a.text(); } }; $.extend(options, customOptions); $data = $(this); arr = $data.get(); arr.sort(function(a, b) { var valA = options.by($(a)); var valB = options.by($(b)); if (options.reversed) { return (valA  valB) ? -1 : 0; } else { return (valA  valB) ? 1 : 0; } }); return $(arr); }; })(jQuery); // DOMContentLoaded $(function() { // bind radiobuttons in the form var $filterType = $('#filter input[name="type"]'); var $filterSort = $('#filter input[name="sort"]'); // get the first collection var $applications = $('#applications'); // clone applications to get a second collection var $data = $applications.clone(); // attempt to call Quicksand on every form change $filterType.add($filterSort).change(function(e) { if ($($filterType+':checked').val() == 'all') { var $filteredData = $data.find('li'); } else { var $filteredData = $data.find('li[data-type=' + $($filterType+":checked").val() + ']'); } // if sorted by size if ($('#filter input[name="sort"]:checked').val() == "size") { var $sortedData = $filteredData.sorted({ by: function(v) { return parseFloat($(v).find('span[data-type=size]').text()); } }); } else { // if sorted by name var $sortedData = $filteredData.sorted({ by: function(v) { return $(v).find('strong').text().toLowerCase(); } }); } // finally, call quicksand $applications.quicksand($sortedData, { duration: 800, easing: 'easeInOutQuad' }); }); }); 

hover在代码上

 $(document).ready(function() { // ################################# // PORTFOLIO GRID // ################################# $(".portfolio li").hover(function () { $(this).find('div.content').fadeIn("fast"); }, function() { $(this).find('div.content').fadeOut("fast"); }) // ################################# // IMAGE FADE OPACITY WHEN HOVER // ################################# $(function() { $(".portfolio div img").css("opacity", "1"); // ON MOUSE OVER $(".portfolio div img").hover(function () { // SET OPACITY TO 100% $(this).stop().animate({ opacity: 0.5 }, "fast"); }, // ON MOUSE OUT function () { // SET OPACITY BACK TO 100% $(this).stop().animate({ opacity: 1 }, "fast"); }); }); $('.portfolio .content').each(function() { $('.portfolio .content').hover(function() { $(".portfolio img").not(this).stop().animate({opacity: 0.6}, 400); }, function() { $(".portfolio img").not(this).stop().animate({opacity: 1}, 300); }); }); // ################################# // Lightbox for images // ################################# $(".portfolio a.folio-zoom").fancybox({ 'titlePosition' : 'over' }); }); // END OF DOCUMENT READY 

我的标题JS看起来如何

            function setEqualHeight(columns) { var tallestcolumn = 0; columns.each( function() { currentHeight = $(this).height(); if(currentHeight > tallestcolumn) { tallestcolumn = currentHeight; } } ); columns.height(tallestcolumn); } $(document).ready(function() { setEqualHeight($(".pontent-container > div")); `enter code here`});    

Answer 1

开关

 $(".portfolio li").hover(function () { $(this).find('div.content').fadeIn("fast"); }, function() { $(this).find('div.content').fadeOut("fast"); }) 

至

 $(".portfolio li").on('hover', function () { $(this).find('div.content').fadeIn("fast"); }, function() { $(this).find('div.content').fadeOut("fast"); }) 

更新将其拉出一个function

 $.fn.showContent = function() { var $this = $(this); $this.hover(function () { $this.find('div.content').fadeIn("fast"); }, function() { $this.find('div.content').fadeOut("fast"); }) } 

然后在投资组合中hover代码

 $(document).ready(function() { $('.portfolio li').showContent(); }) 

在你的流沙代码中

 .... } }); } // finally, call quicksand $applications.quicksand($sortedData, { duration: 800, easing: 'easeInOutQuad' }); $('.portfolio li').showContent(); }); 

Answer 2

我无法使用.live（）或.on（）来解决hover错误，如前面的答案中所述。 我通过在jquery.quicksand.js中 注释回调函数来解决这个问题

 var postCallback = function () { /*if (!postCallbackPerformed) { postCallbackPerformed = 1; // hack: // used to be: $sourceParent.html($dest.html()); // put target HTML into visible source container // but new webkit builds cause flickering when replacing the collections $toDelete = $sourceParent.find('> *'); $sourceParent.prepend($dest.find('> *')); $toDelete.remove(); if (adjustHeightOnCallback) { $sourceParent.css('height', destHeight); } options.enhancement($sourceParent); // Perform custom visual enhancements on a newly replaced collection if (typeof callbackFunction == 'function') { callbackFunction.call(this); } }*/ 

这样做了诀窍，一切都像以前一样工作，它也解决了视网膜图像替换过滤后的bug – 用于获取标准图像（没有再次调用retina.js脚本）。