jScroll callback to fade in new content

Question

I am trying to fade in the new content loaded by jScroll with the callback option. This is what I've tried so far, but with no success.

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

You have to hide the element first, before you call the animation. Also, if you try to animate by selecting .jscroll-added, you will animate every content delivered so far. To get it right, you have to target only the element that was just added:

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