如何应用jQuery流沙（排序）而不会丢失基于jQuery的投资组合悬停？ [英] How to apply jQuery quicksand (sort) without losing a jQuery based portfolio hover?

问题描述

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

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?

问题是： 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

我的Header 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> 

推荐答案

我无法解决悬停错误。 live（）或.on（），如前面的答案中所述。我通过评论 jquery.quicksand.js中的回调函数来解决这个问题

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);
                }                    
            }*/

这就行了，一切都像以前一样过滤后用于获取标准图像（不再调用retina.js脚本）的视网膜图像替换bug也解决了这个问题。

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).

这篇关于如何应用jQuery流沙（排序）而不会丢失基于jQuery的投资组合悬停？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！