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

<pre><code class="code-1 nolinks" id="code-234678"><span>jQuery.fn.slideFadeHide = function(speed, easing, callback) {return this.animate({opacity: 'hide', height: 'hide'}, speed, easing, callback);};</span>
<span>jQuery.fn.slideFadeShow = function(speed, easing, callback) {return this.animate({opacity: 'show', height: 'show'}, speed, easing, callback);};</span>
</code></pre>
</div>


<div>
Thanks, shue. &nbsp;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?<br />
<br />
And then what do I put in the html? Again, please put it in contect with the other html around it.<br />
<br />
Thanks!<br />
<br />
John
</div>


<div>
hey, that works great thanks! <br />
<br />
If you have a moment, what is it about this line that tells the browser to do both?<br />
<br />
$(elements[last]).animate(<wbr />{opacity: 'hide', height: 'hide'}, settings.speed);<br />
<br />
Also, please take a look at this question: <a href="https://www.experts-exchange.com/questions/24084781/With-javascript-making-images-slide-out-to-the-right-and-in-from-the-left.html" rel="ugc">https://www.experts-exchange.com/questions/24084781/With-javascript-making-images-slide-out-to-the-right-and-in-from-the-left.html</a><br />
<br />
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 &nbsp;come and go from the upper left hand corner as opposed to the upper middle; as well as making them expand and contract.)<br />
<br />
Thanks,<br />
John<br />

</div>


<div>
<div class="content wysiwyg-content">
Please take a look a this web page (<a href="http://www.discretedata.com/JCRD/WREM/WREM_white3slides.html" rel="ugc">http://www.discretedata.com/JCRD/WREM/WREM_white3slides.html</a>). &nbsp;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.<br />
(<a href="http://www.discretedata.com/scripts/jquery.innerfade.js" rel="ugc">http://www.discretedata.com/scripts/jquery.innerfade.js</a>)<br />
<br />
Thanks,<br />
<br />
John
</div>
</div>


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

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

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.

JavaScript

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.