0

There are two lines as the following:

<div id="test"> test one jquery is a good library.<br/>
test two php is a good language.</div>

now i want to scroll them one by one (the top line hide the bottom line show.vice versa)and the line shows and hides automatically which time interval is 500 milliseconds . the scroll direction is from bottom to top.

i don't know how to do.

the following is my code. but I am totally stucked. i don't know how to write the function.

$(function(){
            $('#test').slideUp('500' function(){
        //how to write
      });
        })​
4

2 回答 2

1

要切换内容，您需要交换 div 中的文本，并且您需要某种方式在定义的间隔后重复此操作，这可以通过 javascript 的 setInterval 方法来实现。 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);
于 2012-05-16T09:46:12.000 回答
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>
于 2012-05-16T11:47:58.743 回答