Question

我正在使用infinite-ajax-scroll插件（https://github.com/webcreate/infinite-ajax-scroll）和Hover Caption插件（http://ryun.github.io/HCaptions/）。悬停效果在第一页上运行良好，但它不适用于通过无限滚动插件加载的页面。

我已经读过使用.on（）而不是.hover（）应该工作并且还尝试了.scroll（）事件。但是，如果不修改插件中的代码并不理想，我似乎无法工作。

我应该检测哪些事件来激活hcaption插件以及如何编写？

我的代码如下：

<script>

$(document).ready(function () {

     //hcaptions for mouseover tiles  
     $('.hcaption').hcaptions({
         effect: "slide",
         direction: "bottom"
     });

     //isotope
     var $container = $('#container'),
         filters = {};
     $container.isotope({
         itemSelector: '.element, .element_tile',

     });    

     // Infinite Ajax Scroll configuration
     jQuery.ias({
         container: '#main', // main container where data goes to append
         item: '.element', // single items
         pagination: '.paginate', // page navigation
         next: '.paginate a', // next page selector
         loader: '<img src="public/img/ajax-loader.gif"/>', // loading gif
         loaderDelay: 200,
         thresholdMargin: -600,
         noneleft: 'No more discounts', //Contains the message to be displayed when there are no more pages left to load
         triggerPageThreshold: '10', // show "load more" if scroll more than this to stop
         trigger: "",
         onLoadItems: function (newElements) {
             // hide new items while they are loading
             var $newElems = $(newElements).css({
                 opacity: 0
             });
             // ensure that images load before adding to isotope layout
             $newElems.imagesLoaded(function () {
                 // show elems now they're ready
                 $newElems.animate({
                     opacity: 1
                 });
                 $container.isotope('insert', $newElems, true);
             });
             return true;
         }
     });
 });

 </script>

hcaption.js中可能需要覆盖的代码部分：

        $target.css('z-index',opts.zindex+1).hide();
        $wrap.hover(function () {
            $target.stop(true, true).fadeIn(+opts.speed, opts.onshow());
        }, function () {
            $target.stop(true, true).fadeOut(+opts.speed, opts.onhide());
        });

Answer 1

使用无限Ajax Scroll插件中的onRenderComplete挂钩，只需在新元素加载后初始化Hover Caption插件。

我已经设置了一个JSFiddle和Gist来模拟Infinite Scroll以及HCaptions来向你展示我的意思。

http://jsfiddle.net/nate/9JGTV/1/

$('.hcaption').hcaptions();

var iterator = 0;

$.ias({
    container : '.listing',
    item: '.post',
    pagination: '.navigation',
    next: '.next-posts a',
    triggerPageThreshold: 10,

    // You should not need this! This is purely to make
    // it possible to view repeated pages on JSFiddle,
    // since each hcaption requires a unique ID.
    onLoadItems: function (items) {
        $(items).each(function (i, item) {
            $(item).find('.hcaption')
              .removeAttr('data-target')
              .attr('data-target', 'tog-' + iterator);

            $(item).find('.cap-overlay')
              .removeAttr('id')
              .attr('id', 'tog-' + iterator);

            iterator += 1;
        });
    },

    // This is the important bit --
    // reinitialize hcaptions on the new items.
    onRenderComplete: function (items) {
        $(items).find('.hcaption').hcaptions();
    },
    loader: '<img src="http://placehold.it/100x50/333333/ffffff/&text=LOADING..."/>'
});

有两点需要注意：

您必须使用onRenderComplete，而不是onLoadItems，否则hcaptions将无法正常使用。我怀疑该插件根据它使用的项目的渲染大小进行计算，这意味着如果它们在DOM之前被触发，那么这些大小是错误的。
hcaptions依赖于每个项目的唯一id s。这是一种奇怪的限制 - 这不是我写插件的方式，而是whatevs。因此，您需要确保加载的每个新项都有唯一的data-target和id。对于我的例子，我必须对onLoadItems钩子中的新项目进行一些额外的操作，以便为它们提供您不必担心的独特id。

JQuery语法 - 悬停不在无限滚动页面上工作

1 个答案: