If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

jQuery fadeIn and fadeOut help

I have a couple of divs on a page. I then have a navigation that shows related content based on which link is clicked. below is my javascript so far. I am wanting to have the visible div fade out and then new div fade in. Please help. Thanks in advance.

duration -> A string or number determining how long the animation will run.
easing -> A string indicating which easing function to use for the transition.
callback -> A function to call once the animation is complete.

webdev, there is a little more to jQuery than just the animation part. Just think of cross-browser standard syntax and behavior that jQuery allows – where fading and animation is already something a little more advanced in terms of cross-browser compatibility. But that’s not the subject of this thread.

speck, the problem is that you are fading in and out the two elements at the same time. When they are completely faded out they are set to display: none, i. e. they take no space. Now, while fading their opacity is changed and as soon as they are the slightest bit visible, they take their space in the natural flow of elements which is why the second element gets pushed down. One solution is to position these elements absolutely but that may make the layout less flexible. Another solution would be to fade the elements subsequently, i. e. make the fade-in after the fade-out has finished.

And by the way: When I click these links the page jumps to the top which happens because you have useless links with just a hash as reference. I have overcome this with the preventDefault() function above but one rule of thumb in semantic HTML development is: If it doesn’t mean anything, don’t write it. In this case the anchor elements make no sense because they aren’t linking anything or going anywhere, respectively. If they are just supposed to work with JS then they don’t have to be anchor elements in the first place, you can perform an onclick event on any element. And with CSS you can still style them to look like clickable items. Or, if you indeed decide to use anchor elements, you don’t have to put an href attribute there if it doesn’t have a meaningful value anyway.

But in the end it just comes down to one conclusion: If a clickable element is just working or making sense if JS is available then create and add it with JS in the first place, and don’t hard code it into the HTML. Why have HTML that doesn’t make sense all by itself? That’s called progressive enhancement.

Users who have thanked VIPStephan for this post:

webdev, there is a little more to jQuery than just the animation part......

yep, but so what

A lot of people (especially noobies) don't realise that jquery is nothing more than a bunch of javascript code/functions to perform certain tasks pre-written by someone else.

Consequently, there is nothing you can do with jquery that you cannot do with just plain javascript, and in just about every case the amount of "back end" code jquery will run to perform a task will be much more than the equivalent plain javascript code.

VIPStephan,
Thank you so much for taking time to help me understand this. Your advice and the article you linked to were both very helpful. This is information I can use the rest of my career. Thanks again!

While I agree that you should have some javascript knowledge and understand its principles before starting to use a library such as jquery, why would you type your dozen lines of code when you can use such a simple function as fadeIn()...?