Question

Needless to say, I’m a beginner, especially when it comes to JavaScript and jQuery. I’m looking for a way to make one div fade in (via visibility, not opacity) and one fade out.

Here’s an example of the HTML I’m going for.

<div class="container">
 <div class="secondary" style="height:100px;width:100px;display:none;">
  When you hover over .main, .secondary fades in and .main fades out
 </div>
 <div class="main" style="height:100px;width:100px;">
  This text is visible by default
 </div>
</div>

I’ve looked around and couldn’t find quite what I was looking for.

Thank you so much in advance.

Answer 1

If you need some effects:

$('.secondary').fadeIn('fast');
$('.main').fadeOut('fast');

If not:

$('.secondary').fadeIn(0);
$('.main').fadeOut(0);

or if you want to keep place for the hidden element:

$('.secondary').css({ visibility: 'visible' });
$('.main').css({ visibility: 'hidden' });