Как применить jQuery quicksand (сортировать), не теряя зависания на основе jQuery?

Question

При использовании jQuery для применения зыбучих песков (скрипт для сортировки списков) я обнаруживаю, что теряю зависания моего портфеля для элементов списка.

Как сохранить список после того, как кто-то отсортировал список?

Проблема на: 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 : (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'
    });

  });

});

Код при наведении курсора

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

<!-- 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> 

Answer 1

Мне не удалось устранить ошибку зависания с помощью .live () или .on (), как описано в предыдущих ответах.Я решаю это путем комментирования функции обратного вызова в 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);
                }                    
            }*/

Это добилось цели, все работает какдо и исправлена ​​ошибка замены изображения сетчатки после фильтрации - используется для получения стандартных изображений (не вызывал скрипт retina.js снова).

Answer 2

переключатель

$(".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");
        })  

ОБНОВЛЕНИЕ Вытащить его к функции

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

Тогда в портфеле код наведения

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

И в вашем коде зыбучих песков

....


   }
  });
}   

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

  });