Question

我正在使用Drupal Views将带有this无限滚动脚本的内容加载到一个砖石样式的项目网格中。

它无限滚动，但附加项不保留原始项的CSS属性。我不确定为什么会这样。

此外，我正在使用jQuery悬停效果来＆＃34; float＆＃34;内容覆盖我的图像。这是非常简单的代码。我无法想象它对这个问题有任何影响，但这只是以防万一：

jQuery for hover effect

$j('div.blog-list').on(".blog-thumbs-animate").hover(function(){
    $j("img", this).stop().animate({opacity: 0.9},{queue:false,duration:75});
    $j(".bhover", this).animate({opacity: 0.9},{queue:false,duration:75});  
}, function() {
    $j("img", this).stop().animate({opacity: 1},{queue:false,duration:75});
    $j(".bhover", this).animate({opacity: 0},{queue:false,duration:75});        
});

jQuery for masonry and infinite scrolling：

<script>
  (function($){

    var $container = $('.blog-list');

    $container.imagesLoaded(function($){
      $container.masonry({
        itemSelector: 'div.pmason',
        columnWidth: 320
      });
    }(jQuery));

    $container.infinitescroll({
      navSelector  : '.pager',    // selector for the paged navigation 
      nextSelector : '.pager-next a',  // selector for the NEXT link (to page 2)
      itemSelector : '.blog-list .node',     // selector for all items you'll retrieve
           animate : true,
      loading: {
          finishedMsg: 'No more pages to load.',
        }
      },
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( 'appended', $newElems, true ); 
        });
      }
    );

  })(jQuery);
</script>

编辑：这是CSS

.blist .pmason { width:319px; margin-right:1px; margin-bottom:1px; background:#FFF !important;}
.blist .last { margin-bottom:1px !important; margin-right:1px !important; }
.blog-thumbs-animate { position:relative !important; }
.blist .bhover { opacity:0; background:#f4f4f4; width:319px; position:absolute; bottom:0; left:0; height:100% !important; }
.bhover .inside { padding:20px; }

有人可以帮忙吗？

谢谢！

Answer 1

我不知道这个无限滚动插件。但似乎它创建了新元素，而这些新元素并没有悬停事件监听器。

所以，我建议你这样做悬停事件监听器。

$j('div.blog-list').on("mouseenter",".blog-thumbs-animate", function (){

    $j("img", this).stop().animate({opacity: 0.9},{queue:false,duration:75});
    $j(".bhover", this).animate({opacity: 0.9},{queue:false,duration:75});  

}).on("mouseleave",".blog-thumbs-animate", function () {

    $j("img", this).stop().animate({opacity: 1},{queue:false,duration:75});
    $j(".bhover", this).animate({opacity: 0},{queue:false,duration:75});   

});

通过on方法向hover方法添加事件侦听器之间的区别在于它不会将事件侦听器直接附加到元素，而是附加到选择器。因此，即使您创建了新元素，此事件侦听器也将匹配新元素。

此处有更多详情http://api.jquery.com/on/

Answer 2

好吧，我好好理解了。我的问题最终出现在HTML中，这是我在原始问题中未能发布的一段代码。

对于那些好奇的人，我的HTML最初看起来像这样：

<div class="blog-list">
<div class="pmason"></div>
<div class="pmason"></div>
<div class="pmason"></div>
</div>

任何正常用途的代码都是正确的。但是因为无限卷轴在其自身内部添加了新项目，所以我最终得到了更像这样的东西：

<div class="blog-list">
<div class="pmason"></div>
<div class="pmason"></div>
<div class="pmason"></div>
</div>
<div class="infinite-scroll">
<div class="pmason"></div>
<div class="pmason"></div>
<div class="pmason"></div>
</div>

RUH-ROH。你看到这里发生了什么？尽管我已经指定使用该类，但无限滚动已将其置于我的博客列表类之外。为了解决这个问题，我只是在博客列表的INSIDE上添加了一个额外的包装器，这样当无限滚动运行时它会保留所有内容。

这是最终结果，现在它的工作方式与预期相符！

<div class="blog-list">
<div class="inner">
<div class="pmason"></div>
<div class="pmason"></div>
<div class="pmason"></div>
</div>
<div class="infinite-scroll">
<div class="pmason"></div>
<div class="pmason"></div>
<div class="pmason"></div>
</div>
</div>

非常感谢那些试图帮助我的人。我真的很感激。

CSS属性未应用于jQuery无限滚动中的附加项

2 个答案: