gdsmith / jquery.easing

jQuery Easing Plugin
http://gsgd.co.uk/sandbox/jquery/easing
Other
922 stars 422 forks source link

[Solved] No fade in when parameter "visible" is used in up direction #7

Closed janjouketjalsma closed 9 years ago

janjouketjalsma commented 9 years ago

I noticed there was no pretty fade in effect for the upcoming slide when the "visible" parameter is used in the "up" direction. This is due to the fact that the element at the top is moved down and then faded in (even though it is not in the view yet).

I modified the code to

  1. hide the elements that should not be visible when starting in init() function
  2. fade in the next visible item instead of the bottom item in move() function

Code added to init()

if(s.opts.visible > 0){
    hideAfterIndex = s.opts.visible-1;
    s.targ.children(":gt("+hideAfterIndex+")").hide();
}

New code for move function

function move( dir ){
    var sel, eq, appType;

    if( !s.elem.is(':visible') ) return;

    if( dir == 'up' ){
        sel = ':first-child';
        eq = '-=';
        appType = 'appendTo';

        //Added to determine next slide to fade
        if(s.opts.visible > 0){
            nextToShow = s.opts.visible + 1;
            fadeSel = ':nth-child(' + nextToShow + 'n)'; 
        }else{
            fadeSel = sel;
        }
        //End addition

    }else{
        sel = ':last-child';
        eq = '+=';
        appType = 'prependTo';

        //Addition
        fadeSel = sel;
        //End addition

    }

    var selChild = s.targ.children(sel);

    //Added to get elem for next slide to fade
    var fadeChild = s.targ.children(fadeSel)
    //End addition

    var height = selChild.outerHeight();

    s.targ.stop(true, true).animate({
        'top': eq + height + "px"
    }, s.opts.speed, s.opts.easing, function(){
        //Removed fadeIn() here
        selChild.hide()[appType]( s.targ );
        //End remove

        //Added to fade in proper element
        fadeChild.fadeIn().addClass("faded");
        //End addition

        s.targ.css('top', 0);

        adjHeight();

    });
}// Move

Maybe this helps someone.