如何使用jQuery通過容器中的元素進行動畫製作？

我正在使用jQuery進行文章輪播以嘗試更好地控制框架。我有一個包含div，在這個div中我有多篇文章。如何使用jQuery通過容器中的元素進行動畫製作？

<div id="container"> 
    <article> 
     <h3>Article Heading</h3> 
     <p>Article Content</p> 
    </article> 
    <article> 
    ... 
</div>

的格被格式化爲特定寬度和高度，溢出設置爲隱藏

我想，當用戶點擊一個按鈕，動畫會這樣，它調用滾動到功能無論是下一個或以前的文章

var articles = -1; 
var currentPosition = -1; 
window.onload = function(){ 
    articles = $("#container>article"); 
    currentPosition = 0; 
} 
function scrollNext(){ 
    $('#container').animate({ 
     scrollTop: $(articles[currentPosition+1]).offset().top 
    }, 750); 
    currentPosition++; 
}

然而，當scrollNext函數被調用時，它會滾動到下一篇文章的段落，或將滾動出的順序。

我想知道這是否是一個選擇器的問題，或者可能是我的頁面樣式，或者這樣做的正確方法是什麼。 See the full page here

Or try it out on jsfiddle

來源

2013-05-14 Alex Roth

你能添加一個鏈接到一個可編輯的演示（使用像[JSFiddle]（http://jsfiddle.net））在線網站）？ –

@MattCoughlin剛剛編輯鏈接的問題！ –

你的利潤率搞亂你。爲什麼不嘗試這樣的事情？

var box = $("#container"), height = box.height(); 
currentPosition++; 
box.animate({scrollTop: currentPosition*height});

來源

2013-05-14 20:47:02

完美的作品！謝謝@Kinkink –

您正在使用.offset()它給你的偏移量相比身體。

既然你是想你需要使用.position()

http://api.jquery.com/position/

而且使用position()的div#container內滾動要求DIV #container在你的CSS position: relative;。

一旦你在你的jQuery，你需要改變你的scrollTop的動畫包括div#container的scrollTop()加入到下一篇文章

的position()像這樣：

$('#container').animate({ 
    scrollTop: $('#container').scrollTop() + $(pdiv).position().top 
}, 750);

你可以看到在更新後的jsfiddle這一切工作：

http://jsfiddle.net/9ryjy/1/

來源

2013-05-14 20:54:22

如何使用jQuery通過容器中的元素進行動畫製作？

回答

相關問題