How to apply jQuery quicksand (sort) without losing a jQuery based portfolio hover?

问题

When using jQuery to apply quicksand (a script for sorting lists) I find that I lose my portfolio hovers for my list items.

How do I keep my list hovers after someone has sorted the list?

The problem is on: http://digitalstyle.co/portfolio.html

The Quicksand Code

// 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 : (valA > valB) ? -1 : 0;              
  } else {      
    return (valA < valB) ? -1 : (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'
    });

  });

});

The Hover Over Code

$(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

How My Header JS Looks

<!-- Fancybox lightbox -->
<script type="text/javascript" src="js/jquery.fancybox-1.3.1.js"></script>

<!-- Custom javascript for this template -->
<script type="text/javascript" src="js/portfolio-hover.js"></script> 



<script type="text/javascript" src="js/jQuery.equalHeights.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<!-- LOAD HoverAlls --><script type="text/javascript" src="js/jquery.hoveralls.js">            </script>
<!-- LOAD Easing --><script type="text/javascript" src="js/jquery.easing.1.3.min.js">    </script>
<script type="text/javascript">
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`});  
</script>

<script type="text/javascript" src="js/jquery.quicksand.js"></script> 
  <script type="text/javascript" src="js/custom.js"></script> 

回答1:

switch

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

to

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

UPDATE Pull it out to a function

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

Then in the portfolio hover code

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

And in your quicksand code

....


   }
  });
}   

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

  });

回答2:

I was not able to solve the hovering bug with .live() or .on() as described in previous answers. I solve this by commenting the callback function within the 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);
                }                    
            }*/

This did the trick, everything works as before and it also resolved by retina image replace bug after filtering—used to get the standard images (wasn't calling the retina.js script again).

来源：https://stackoverflow.com/questions/9287021/how-to-apply-jquery-quicksand-sort-without-losing-a-jquery-based-portfolio-hov