CODEWITHSUNDEEP
jquery
run
run

Reputation: 553

Scroll the content at set intervals?

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

Upvotes: 0

Views: 1275

Answers (2)

xiaoyi
xiaoyi

Reputation: 6741

This can be archived by using some CSS3 animation, and a few lines of JS code. demo at 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>

Upvotes: 0

Adil
Adil

Reputation: 148130

To switch the content you need to swap the text in the div and you need some way to repeat this after defined intervals which can be achieved by setInterval method by javascript. 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);

Upvotes: 1

Related Questions