jCarouselLite: fadeOut first item before scrolling

[xanuex]

Hi Guys,

I'm using jcarousellite to show my newsitems in a vertical carousel.
http://www.gmarwaha.com/jquery/jcarousellite/

The carousel itself works perfectly, now I'm trying to add that before the news scrolls upwards the top news-item fades-out first.

Now it is fading out the complete list and I simply can't seem to figure out how to 'talk' to the 'active/top' <li> in the list.


Can someone give me a hint?

Thanks in advance,
Marcel


-- Code Below --

$(function() {
	$(".widgetCarousel").jCarouselLite({
		circular: true,
		vertical: true,
		visible: 3,
		scroll: 1,
		start: 1,
		auto: 500,
		speed: 1000,
		beforeStart: function(a) {
			$(a).parent().fadeTo(100, 0);
    		},
		afterEnd: function(a) {
			$(a).parent().fadeTo(100, 1);
		}
    	});

});

<div class="widgetCarousel">
	<ul>
		<li>My very own news item</li>
		<li>My very own news item</li>
		<li>My very own news item</li>
		<li>My very own news item</li>
		<li>My very own news item</li>
		<li>My very own news item</li>	
	</ul>	
</div>

[xanuex]

Hi guys,

by now I've got the following (see code below).

This actually results in fading the first item and shifting things up.

The problem is that after 2 items the 3th item isn't fading away (bottom of the list), the 4th is fading nicely again.

The other problem is that it hides the complete list (except the first and the last one...)


By change somebody who can help me out?
thanks guys!


Added:

$(a[0]).fadeTo(100, 0);

$(".widgetCarousel").jCarouselLite({
	btnNext: ".n5",
	btnPrev: ".p5",
	circular: true,
	vertical: true,
	visible: 3,
	scroll: 1,
	start: 1,
	auto: 500,
	speed: 1000,
	beforeStart: function(a) {
		$(a[0]).fadeTo(100, 0);
	},
	afterEnd: function(a) {
		$(a[0]).show();
	}
}

[xanuex]

The code below seems to work rather well though.

Problem here:
the last <li> in the showed row isn't the first one (duh) so it the fadeOut() won't be apply on this element.

furthermore i'd like the script to pause while the <li> fades out. So when the <li> is gone all shifts up. I've been working with delay, idle and setTimeOut but can't really figure out where to implement it in the code.


If there is anyone who can help me out it would be greatly appreciated

$(".widgetCarousel").jCarouselLite({
	btnNext: ".n5",
	btnPrev: ".p5",
	circular: true,
	vertical: true,
	visible: 3,
	scroll: 1,
	start: 1,
	auto: 400,
	speed: 3000,
	beforeStart: function(a) {
		$(a).first().fadeTo(1000,0,function(){$(a).first().delay(4000).fadeTo(1000,1)});
	}
});

[xanuex]

Looks like I'm talking to myself...
No one who can help me out here??