Question

以下有两行：

<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
      });
        })

Answer 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);

Answer 2

这可以通过使用一些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>

按设定的间隔滚动内容？

2 个答案: