Avatar of John Carney
John CarneyFlag for United States of America 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.



Avatar of undefined
Last Comment
John Carney

8/22/2022 - Mon

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

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.



Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
John Carney

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/Programming/Languages/Scripting/JavaScript/Q_24084781.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.)

Your help has saved me hundreds of hours of internet surfing.