CODEWITHSUNDEEP
jqueryjquery-animate
user1645112
user1645112

Reputation: 65

JQuery animation ul list

<style>
.myNewsSlider
{
width:200px;
height:44px;
overflow:hidden;
position:relative;
 }

 .myNewsList
 {
margin:0px; 
padding:0px;
position: absolute;
 }
</style>

<div class="myNewsSlider">
  <ul class="myNewsList">
    <li>first element</li>
    <li>second element</li>
    <li>third element</li>
  </ul>
</div>

I want the list to move from bottom to top and show each element for 5 seconds.

The first element will show for 5 seconds, then disappear, and the second element will show for 5 seconds, etc.

How do I use Jquery to complete this task?

Upvotes: 3

Views: 3380

Answers (3)

Afshin
Afshin

Reputation: 4215

var p;
for(i=0;i<=3;i++){
  p=i*20;
  $('.myNewsList').animate({"margin-top":"-"+p+"px"},1000).delay(5000);
 }​

.myNewsSlider
 {
  width:200px;
  height:24px;
  overflow:hidden;
  position:relative;

}

DEMO

Upvotes: 1

Tats_innit
Tats_innit

Reputation: 34117

Working demo much simpler : http://jsfiddle.net/aLprr/

APIs used:

Hope it fits the cause :)

P.S. - play around with the 5000 calculation.

Code

$("document").ready(function() {
    $('ul li').each(function(index) {
        $(this).delay(4000 * index).fadeOut(500).promise(function() {
            $(this).remove();
        });
    });


});​

Upvotes: 2

Anirudha
Anirudha

Reputation: 32827

An easy way to do this would be to

1]set myNewsList's li's margin-top property to 100%;

2]Tell jquery to animate myNewsList's li by making its margin-top to 0%

3]for the 5 seconds delay,you can use the setInterval() method where you can hide the first li of myNewsList after every 5 seconds and then animate the second li by setting it's top-margin to 0%.If all li's are hidden,again start from the first li..

Upvotes: 0

Related Questions