2

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

2 に答える 2

0

スイッチ

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

UPDATEそれを関数に引き出します

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

  });
于 2012-02-15T02:34:19.360 に答える