Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question jCarouselLite: fadeOut first item before scrolling

    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 --

    Code:
    $(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>

  • #2
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    $(a[0]).fadeTo(100, 0);

    Code:
    $(".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();
    	}
    }

  • #3
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    Code:
    $(".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)});
    	}
    });
    Last edited by xanuex; 11-28-2011 at 11:20 AM.

  • #4
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Looks like I'm talking to myself...
    No one who can help me out here??


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •