jQueryスムーススクロールで要素を表示する

Question

要素をクリックしたときにdivにスクロールするjQueryのスクロール機能があります。

私が午前問題は、関数は、両方の要素を表示し、それにスクロールしているためということで、スクロールのdivが表示されていると同時にので、スムーズされていない、スクロールが

されていますを開始しますアニメーションを遅らせて#wrapper divを読み込み、アニメーションをスクロールできるようにする方法はありますか？またはそれらの線に沿って何かスクロールがここ

滑らかになるように、jQueryの関数である。

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

Answer 1

ので、誰かがクリックしたとき、彼らはすでにロードされ、それに#wrapper要素は画像が瞬時に

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

はアニメーションにdelay()を使用してみてください。

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

Answer 3

コールバックで.fadeIn()代わりの.show()を使用してみてください。あなたは、画像をプリロードすることができます

$(document).ready(function() { 

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

    });