jq循环用translateY纵向滚动,并且淡出动画效果,附上完整代码
时间: 2024-02-28 14:54:33 浏览: 25
好的,以下是一个简单的示例代码,实现了使用 jQuery 的 animate() 方法和 CSS3 的 transition 属性来实现纵向滚动和淡出动画效果:
HTML 代码:
```html
<div id="wrapper">
<ul id="list">
<li>第一条消息</li>
<li>第二条消息</li>
<li>第三条消息</li>
<li>第四条消息</li>
<li>第五条消息</li>
</ul>
</div>
```
CSS 代码:
```css
#wrapper {
height: 100px;
overflow: hidden;
}
#list {
margin: 0;
padding: 0;
list-style: none;
}
#list li {
height: 20px;
line-height: 20px;
opacity: 1;
transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
#list li.fade-out {
transform: translateY(-20px);
opacity: 0;
}
```
JavaScript 代码:
```javascript
function scrollUp() {
var $list = $('#list');
var $firstItem = $list.find('li:first');
$firstItem.addClass('fade-out');
$list.animate({
'transform': 'translateY(-20px)'
}, 500, function() {
$firstItem.removeClass('fade-out');
$list.css('transform', 'translateY(0)');
$firstItem.appendTo($list);
});
}
setInterval(scrollUp, 2000);
```
解释一下代码的具体实现:
1. 使用 CSS 的 overflow 属性将父容器 #wrapper 设为隐藏,以实现纵向滚动的效果。
2. 使用 CSS 的 transition 属性和 opacity 属性将子元素 #list li 的淡出动画效果实现。
3. 使用 JavaScript 的 setInterval() 方法定时执行 scrollUp() 函数,实现定时滚动的效果。
4. scrollUp() 函数中,找到 #list 中第一个子元素 li,给它添加 fade-out 类,触发淡出动画。
5. 使用 jQuery 的 animate() 方法实现纵向滚动的效果,同时在回调函数中,将第一个子元素 li 移到末尾,实现循环滚动的效果。