asked on

Javascript that will make an image slide in as well as fade in.

Please take a look a this web page (http://www.discretedata.com/JCRD/WREM/WREM_white3slides.html). How do I modify the javascript so that the images slide in as well as fade in? If you could give me the code for all four directions that would be great.
(http://www.discretedata.com/scripts/jquery.innerfade.js)

Thanks,

John

sh0e

You will have to modify jquery.innerfade.js
The below implements .slideFadeHide() and .slideFadeShow() effects.
You will have to add a 'slidefade' animationtype in innerfade.next() that calls the below custom animations.
Don't forget to call removeFilter() at the end.

jQuery.fn.slideFadeHide = function(speed, easing, callback) {return this.animate({opacity: 'hide', height: 'hide'}, speed, easing, callback);};
jQuery.fn.slideFadeShow = function(speed, easing, callback) {return this.animate({opacity: 'show', height: 'show'}, speed, easing, callback);};

Open in new window

John Carney

ASKER

Thanks, shue. So where do I add those two lines of code? In jquery.innerfade.js, I assume. Could you please re-post them in context, with enough of the current code before and after for me to know exatly where they go?

And then what do I put in the html? Again, please put it in contect with the other html around it.

Thanks!

John

ASKER CERTIFIED SOLUTION

sh0e

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

John Carney

ASKER

hey, that works great thanks!

If you have a moment, what is it about this line that tells the browser to do both?

$(elements[last]).animate({opacity: 'hide', height: 'hide'}, settings.speed);

Also, please take a look at this question: https://www.experts-exchange.com/questions/24084781/With-javascript-making-images-slide-out-to-the-right-and-in-from-the-left.html

I'm trying to figure out how to make the images move out to the right, and slide in from the left. (I'm also wondering what part of the script makes the images come and go from the upper left hand corner as opposed to the upper middle; as well as making them expand and contract.)

Thanks,
John