jQuery Smooth Scroll beim Anzeigen von Element

Question

Ich habe eine einfache jQuery Scroll-Funktion, die zu einem Div blättert, wenn ein Element angeklickt wird.

Das Problem, das ich habe ist, dass, weil die Funktion sowohl ein Element ist die Anzeige und dann, um es Scrollen, die Scroll nicht, weil zur gleichen Zeit ist glatt wie die div gezeigt wird, beginnt das Scrollen

Ist Ich kann die Animation entweder verzögern, damit der #wrapper div geladen werden kann, und dann kann die Animation scrollen? Oder etwas in diese Richtung, so dass der Scroll glatt

Hier ist die jQuery-Funktion:

jQuery(document).ready(function($) { 
    $('.divOne').click(function() { 
    $('#wrapper').show(); 
    $('html,body').animate({scrollTop: $('.divTwo').offset().top}, 'slow'); 
    }); 
}); 

Answer 1

Sie die Bilder vorladen können, so dass sie bereits geladen, wenn jemand klickt, und das #wrapper Element mit es werden die Bilder sofort

jQuery(document).ready(function($) { 
    $('#wrapper img').each(function() { 
    var img = new Image(); 
    img.src = this.src; 
    }); 

    $('.divOne').click(function() { 
    $('#wrapper').show(); 
    $('html,body').animate({ 
     scrollTop: $('.divTwo').offset().top 
    }, 'slow'); 
    }); 
}); 

Answer 2

Versuchen delay(), um die Animation verwenden.

jQuery(document).ready(function($) { 
    $('.divOne').click(function() { 
    $('#wrapper').show(); 
    $('html,body').animate({scrollTop: $('.divTwo').offset().top}, 'slow').delay(2000); 
    }); 
}); 

Answer 3

Versuchen .fadeIn() statt .show() mit einem Rückruf verwenden. Siehe unten:

$(document).ready(function() { 

     $('.divOne').click(function(event) { 
      $('#wrapper').fadeIn(150, function() { 
       $('html,body').animate({scrollTop: $('.divTwo').offset().top}, 'slow'); 
      }); 
     }); 

    });