以下有两行:
<div id="test"> test one jquery is a good library.<br/>
test two php is a good language.</div>
现在我想逐个滚动它们(顶行隐藏底线show.vice versa ),该行显示并自动隐藏哪个时间间隔为500毫秒。滚动方向是从下到上。
我不知道该怎么做。
以下是我的代码。但我完全被困住了。我不知道如何写这个函数。
$(function(){
$('#test').slideUp('500' function(){
//how to write
});
})
答案 0 :(得分:1)
要切换内容,你需要交换div中的文本,你需要一些方法在定义的间隔后重复这个,这可以通过javascript的setInterval方法实现。 Demo on JsFiddle
div1= document.getElementById('test');
interval = setInterval(function myfun(){
arr = div1.innerHTML.split(/<br[^>]*>/gi);
div1.innerHTML = arr[1] + '<br/>' + arr[0];
//alert(div1.innerHTML);
}, 1000);
答案 1 :(得分:0)
这可以通过使用一些CSS3动画和几行JS代码来存档。 在http://jsfiddle.net/Vm2wz/2/
进行演示<!doctype html>
<html>
<head>
<style type="text/css">
/* Effect Rules */
.animated { /* you can add moz support as well */
-webkit-transition-properties: top opacity;
-webkit-transition-duration: 0.25s;
}
.hide {
opacity: 0;
}
.top {
top: -30px;
}
.bottom {
top: 30px;
}
/* Canvas Setup Rules */
ul, li {
padding: 0;
margin: 0;
height: 30px;
list-style: none;
}
ul {
position: relative;
}
li {
top: 0;
position: absolute;
}
</style>
</head>
<body>
<ul>
<li>CSS3 is so amazing.</li>
<li>DOM is best toy.</li>
<li>jQuery sucks every way.</li>
</ul>
<script type="text/javascript">
var ul = document.querySelector('ul');
var items = ul.querySelectorAll('li');
for (var i = 0, item; item = items[i]; i++)
items[i].className = 'bottom hide';
var curid = 0, nextid = 1, state = 0;
setInterval(function() {
switch (state) {
case 0: // hide items[curid], and show items[nextid] in 250ms
items[curid].className = 'animated top hide';
items[nextid].className = 'animated';
state = 1;
break;
case 1: // move items[curid] to bottom, curid = nextid, nextid++;
items[curid].className = 'bottom hide';
curid = nextid;
if (++nextid >= items.length) nextid = 0;
state = 0;
break;
} // you may also add a state 2 which do nothing but wait 250ms. then the state goes from 0 -> 2 -> 1 -> 0.
}, 250);
</script>
</body>
</html>