2016-02-09 213 views
0

http://lifeto.cafe24.com/xe/request#如何選擇動態添加元素

如果你去這個頁面,我已經爲了給「淡入」效果我通過頁面滾動使用以下代碼。 我這樣做,是通過使用jQuery addclass和animate.css

https://daneden.github.io/animate.css/

,並在同一時間,我用jscroll.js給它無限滾動效果爲好。

jQuery(document).ready(function() { 
    jQuery('tr').waypoint(function() { 
     jQuery('tr').addClass('animated fadeIn'); 
    }, { 
     offset: '75%' 
    });}); 

,這裏是我使用的無限滾動

/* infinite scroll */ 
jQuery(document).ready(function(){ 
    jQuery('.board_content').jscroll({ 
     loadingHtml: '<center><img src="layouts/window/ajax-loader.gif" alt="Loading" /> Loading...</center>', 
     padding: 0, 
     contentSelector: '.board_list', 
     autoTriggerUntil: 5, 
     nextSelector:'.next_button' 
    }); 
}); 

正如你可以看到,前10是可見的,因爲addclass工作的罰款腳本。

,但在接下來的20秒保持不透明度:0,因爲它們是動態添加到DOM後來由jscroll.js

任何人都可以告訴我怎麼解決這個問題?

謝謝。

+0

你需要綁定的事件時使用jQuery的()函數。如果不是,則只綁定DOM中的現有元素。 http://api.jquery.com/on/ – joaoruimartins

+0

所以我聽說過。但在這種情況下,我將不得不onclick東西不是我?有沒有更好的方法來實現這一點? –

+0

你的觸發器是什麼?滾動?你可以將它綁定在滾動事件上... – joaoruimartins

回答

1

在添加內容以綁定它們之後,您需要運行waypoint腳本。

喜歡的東西:

$('.infinite-scroll').jscroll({ 
    loadingHtml: '<img src="loading.gif" alt="Loading" /> Loading...', 
    padding: 20, 
    nextSelector: 'a.jscroll-next:last', 
    contentSelector: 'li', 
    callback: function() { 
     jQuery('tr').waypoint(function() { 
      jQuery('tr').addClass('animated fadeIn'); 
      }, { 
      offset: '75%' 
     }); 
    } 
}); 
+0

完美!謝謝! –