Question

我正在尝试使用回调选项淡入jScroll加载的新内容。这是我到目前为止所尝试过的，但没有成功。

CSS

.jscroll-added {
    position: relative;
    float: left;
    width: 100%;
    opacity: 0;
}

JavaScript

 function neueFade() {
     jQuery('.jscroll-added').delay(1000).animate({
         opacity: 1
     }, 700);
 };

 jQuery(document).ready(function () {
     jQuery('.container').jscroll({
         debug: false,
         loadingHtml: '<img src="loading.gif" alt="Loading" />',
         padding: 0,
         nextSelector: '.prev-posts-link a',
         contentSelector: '.container',
         pagingSelector: '',
         callback: neueFade,
     });
 });

Answer 1

在调用动画之前，必须先隐藏元素。此外，如果您尝试通过选择.jscroll-added进行动画处理，则会为到目前为止发送的每个内容制作动画。要做到正确，您必须只定位刚刚添加的元素：

function neueFade() {
    $(this).hide().fadeIn(1000);
}

Answer 2

我是通过修改脚本文件 jquery.jscroll.js 版本2.3.4来实现的，如下所示：

第156行：添加＆＃34; .hide（）＆＃34;在＆＃34; .last（）＆＃34;。

之后

$inner.find('div.jscroll-added').last().hide().load( ....

第169行：添加＆＃34; .fadeIn（）＆＃34;。

}).fadeIn(1000);

我试过这个并且它工作得很完美。

Answer 3

$('#comments_area').jscroll({
        autoTrigger: true,
        nextSelector: 'a.jscroll-next:last',
        contentSelector: '#area_main_comment',
        callback: function(){ $('#comments_area').hide(0).fadeIn(2000); comment_active(); }
    });

jScroll回调淡入新内容

3 个答案: