CSS属性未应用于jQuery无限滚动中的附加项
我使用Drupal视图将带有无限滚动脚本的内容加载到项目的砖石风格网格中 它可以无限滚动,但附加的项不保留原始项的CSS属性。我真的不知道为什么会发生这种情况 此外,我使用jQuery悬停效果在图像上“浮动”内容。这是非常简单的代码。我无法想象它会对这个问题产生任何影响,但这里只是以防万一: jQuery的悬停效果CSS属性未应用于jQuery无限滚动中的附加项,jquery,css,infinite-scroll,masonry,Jquery,Css,Infinite Scroll,Masonry,我使用Drupal视图将带有无限滚动脚本的内容加载到项目的砖石风格网格中 它可以无限滚动,但附加的项不保留原始项的CSS属性。我真的不知道为什么会发生这种情况 此外,我使用jQuery悬停效果在图像上“浮动”内容。这是非常简单的代码。我无法想象它会对这个问题产生任何影响,但这里只是以防万一: jQuery的悬停效果 $j('div.blog-list').on(".blog-thumbs-animate").hover(function(){ $j("img", this).stop()
$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用于砌石和无限滚动:
<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>
有人能帮忙吗
谢谢 我不知道这个无限滚动插件。但它似乎创建了新元素,而这些新元素没有悬停事件侦听器 因此,我建议您这样做悬停事件侦听器
$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
方法之间的区别在于,它不会将事件侦听器直接附加到元素,而是附加到选择器。因此,即使创建新元素,此事件侦听器也将匹配新元素
这里有更多的细节好吧,我想好了。我的问题最终出现在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>
卢武铉。你看到这里发生了什么吗?尽管我已指定使用该类,但无限卷轴已将其自身置于我的blog list类之外。为了解决这个问题,我只是在博客列表的内部添加了一个额外的包装器,这样当无限滚动运行时,它就可以保存所有内容
这是最终结果,现在它的工作方式与预期的一样
<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在哪里?还是“CSS”对这个javascript悬停效果的意思?谢谢你的提示!您的代码可以工作,但不幸的是,这种执行事件侦听器的方式并没有改变项目的显示方式。但这可能更干净,所以我可以保留它。你能给我们提供一个你的代码工作的例子吗?如果我的回答对你有所帮助,请投票表决。
<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>