CODEWITHSUNDEEP
jquerylistloops
mike
mike

Reputation: 749

jquery list carousel

I made this jFiddle for people to see almost exactly what I need..

http://jsfiddle.net/Vjp68/

Basically the last item in the list is two lines and needs to move up slightly more than the other items to be above the grey bar. Also the second time through the items disappear, then fade in, they should always be visible...

I got the js code online and added the margin-top animation and this entire line:

$("#top ul" + " li:eq(" + j + ")").animate({"margin-top" : "0px"});

the rest is the all the original markup...

So the margin-top: -18 animation I added is moving all the items upward, and I added the line above so that when the list finishes the last item, it doesnt continue to move upward, but start back at the origin...

I havent really set it up properlly though...What I really need it to do is continue to appear as if the list is moving upward like on the first runthrough...but when it says

"Two line description that should move higher"

below that should be the first line again, "Short Company Description 1" and loop to infinity.

So basically I need a looping list with the ability to move the last item a bit more, or any item, unless that is much harder, would like to keep it simple.

Thanks for any info!!

Upvotes: 0

Views: 512

Answers (2)

Anujith
Anujith

Reputation: 9370

See this Sample Fiddle

function cyclee(){
    $("#top ul" + " li:eq(0)").delay(3000)
        .animate({"opacity" : "0", "margin-top" : "-18"}, 400, function(){
             $("#top ul").append($(this).css("opacity", "1").css("margin-top", "0"));
             cyclee();
            });
};

You need to append the first <li> to the end of <ul> after animating it and restoring its default css properties.

Upvotes: 3

Derek
Derek

Reputation: 2735

Basically, you can make use of the height of element to offset the margin top for every loop. In order to loop infinity, animate the first item and add callback for animate complete. In the animate complete function, reset the margin top and opacity of the animated item and append it the ul (Now, the first item become the last item in <ul> and the second item become the first item in <ul>). As a result, we just need to animate the first item.


Here is jsfiddle : http://jsfiddle.net/Vjp68/1/

function cyclee(){
    var h =  $("li:eq(0)", self).outerHeight(true) * -1;
    $("li:eq(0)", self).animate({"opacity" : "0", "margin-top" : h + "px"}, delay, function(){
        $(this).css({"margin-top":"0","opacity" : "1"});
        self.append(this);
        cyclee();
    });     
};

Upvotes: 1

Related Questions