Very simple fade in on slide without anythingsliderfx. really lightweight and simple needed

[havecreativity]

Hi,

Excellent work Proloser and Mottie.

Would you know how to make it so when a slide slides across (Yes I want it to still slide not cross fade). How to make it so it fades in as it slides.

The reason I need this, is because, I am developing an open source Drupal 7 Theme with this excellent slider on the home page and am sliding views across (Which is basically like blog post summaries) with a picture floated left, a h2 heading a summary of text to the right and a read more link underneath.

Unfortunately when this kind of content slides across, some browsers more than others kind of make the heading come in kind of choppily and horribly faded in, the paragraph text too (kind of comes in kind of uglily thinned out, then thickens out in a choppy manner once the slide stops), I think the browsers may do this, more in reaction to the floated text zipping across, rather than by deliberate design. But it really ruins what would otherwise be a really slick slide for views in Drupal. I know anything slider works great with just images. But when you go floating text about, including larger font text like a h2 heading. Things start to look ugly, when the browsers can't cope with it.

As for Mottie's anythingsliderfx Javscript, this would be overkill and far too much extra kb and effects that are not going to be used for what I need.

I was hoping a simple jQuery fade in timed fade rate of choice, for all content that slides across in a slide would smooth things over and mask the choppyness the browsers want to inflict on my sliding content. Nicely, Unfortunately, my Javascript/jQuery skills are very very minimal (I have decided to focus on PHP and CSS in the time I have available).

So I am hoping you guys can help.

(Ok came up with a solution in the next comment, if anyone knows better please add)

Thanks from Josh

[havecreativity]

Ok,

This is what I came up with:

Got motties fade hack

http://jsfiddle.net/aRyZ5/

and changed to fadeTo instead of fadout and fade in. So I could fade to an opacity and the slide still be seen.

So I put the below into the mix:

delayBeforeAnimate:50,
onSlideBegin:function(e,slider){slider.$items.fadeTo(560,0.6,"easeOutExpo");},
onSlideComplete:function(slider){slider.$items.fadeTo(160,1);},

It did what I wanted, it may be the best solution we have, to fight against browsers making text ugly as the slider slides across and then comes to a stop. Then again someone may have a better solution after coming to frustration trying to slide blog like content.

For anyone using the above, you would need the easing plugin to use easeOutExpo, otherwise jQuery just comes with the swing and linear easing, you can change easeOutExpo, to swing or linear, if not using the easing plugin. Obviously the the script I have put in this post just gets copy and pasted under any other things you may be using like

autoPlay:true,
expand:true,
delay:2500,
easing:"easeInOutQuint",
animationTime:900,
delayBeforeAnimate:50,
onSlideBegin:function(e,slider){
    slider.$items.fadeTo(560,0.6,"easeOutExpo");
},
onSlideComplete:function(slider){
    slider.$items.fadeTo(160,1);
}

[Mottie]

Hi Hubsmile!

Thanks for sharing! I actually used your setting in this demo to give others an idea of how to apply the settings above. I guess I should have included some text in the slides to see the real difference, but I guess it matters more when the slider is larger.

Anyway, I appreciate this and I'll add a link to the demo and this issue on the wiki demo page.

[havecreativity]

Thanks Mottie, hope it comes in handy for some people. I ended up putting easeInOutQuint as the easing for the whole slider and it was a lot, lot smoother than Quad which I had in my post originally. easeInOutQuad seems a bit jittery.

Off topic, also thankyou very much Mottie for writing the code for allowing swipe on anything slider. Since I will only code a theme so it is smart phone and tablet friendly. The code below that you wrote, was almost too useful. Particularly because it is far lighter than the jQuery mobile plugin javascript that is available.

// Callback when the plugin finished initializing.
// For finger swipe on mobile devices, by Mottie

$('#slider').anythingSlider({

    onInitialized: function(e, slider) {
        var time = 1000, // allow movement if < 1000 ms (1 sec)
            range = 50,  // swipe movement of 50 pixels triggers the slider
            x, t, r, touch = "ontouchend" in document,
            st = (touch) ? 'touchstart' : 'mousedown',
            en = (touch) ? 'touchend' : 'mouseup';

        slider.$window
            .bind(st, function(e){
                // prevent image drag(Firefox)
                e.preventDefault();
                t = e.timeStamp;
                x = e.pageX;
            })
            .bind(en, function(e){
                e.preventDefault();
                r = Math.abs(e.pageX - x);
                // allow if movement < 1 sec
                if (e.timeStamp - t < time) {
                    if (e.pageX < x && r > range) {
                        slider.goForward();
                    }
                    if (e.pageX > x && r > range) {
                        slider.goBack();
                    }
                }
            });
    }

});