隨着文字出現在屏幕上，自動向下滾動

我按字顯示了一個單詞（使用lettering.js和jQuery，這很好，現在我想添加一個額外的功能：我希望頁面向下滾動文本顯示在屏幕上，我想：隨着文字出現在屏幕上，自動向下滾動

div.lettering('words'); 
div.find('span').hide(); 
div.show().find('span').each(function(i) { 
    $(this).delay(delay * i).fadeIn(fadeIn); 
    var _this = $(this); 
    $('html, body').scrollTop(
     _this.offset().top - $('html, body').offset().top + $('html, body').scrollTop() 
    ); 
});

也試過：

div.lettering('words'); 
div.find('span').hide(); 
div.show().find('span').each(function(i) { 
    $(this).delay(delay * i).fadeIn(fadeIn); 
    var _this = $(this); 
    $('html, body').animate({ 
     scrollTop: _this.offset().top 
    }; 500); 
});

但頁面滾動到頁面加載某些位置，就是這樣我的感覺是，_this變量我使用的是不正確的。

任何想法如何實現我的目標？

來源

2012-12-20 François Koessler

你可以在http://jsfiddle.net/上設置一個簡單的例子嗎？ – Blender

我的猜測是'this'不是指循環過程中的同一個元素。嘗試在自執行的匿名函數中包裝使用'this'的代碼：http://jsfiddle.net/GfCZh/ – Blender

如果您直接將內容添加到您的身體，並且在添加元素時動態更改身體的高度，那麼您需要執行此操作。

div.show().find('span').each(function(i) { 
    $(this).delay(delay * i).fadeIn(fadeIn,function(){ 
    var _body = $("body"); 
     _body.animate({ 
     scrollTop: document.body.scrollHeight; 
     }; 500); 
    }); 
});

你的情況會發生什麼事是向下滾動動畫立即它wasnt需要發生，做這種方式可以確保只有當淡入完成動畫時效果動畫的幻燈片。

否則，如果你不直接添加內容到你的身體，你仍然可以使用相同的技術應用於外部和內部。

來源

2012-12-20 04:24:58 ShrekOverflow

正如@Abhishek在他的回答中指出的那樣，我必須使用回調才能正常工作。但是，滾動仍然不起作用。所以，我結束了使用阿布舍克的代碼與scrollTo插件組合：

div.lettering('words'); 
div.find('span').hide(); 
$.scrollTo('h3', {duration:500}); 
div.show().find('span').each(function(i) { 
    var _this = $(this); 
    $(this).delay(delay * i).fadeIn(fadeIn,function(){ 
     $.scrollTo(_this, {duration:100}); 
    }); 
});

動畫不順利，因爲我想這是因爲duration: 100有點太快了。但如果我設置一個較高的值，所有文本顯示後滾動都會發生，這感覺有點奇怪。

來源

2012-12-20 08:15:38

使用緩動函數：P – ShrekOverflow

隨着文字出現在屏幕上，自動向下滾動

回答

相關問題