CODEWITHSUNDEEP
jquery
trev
trev

Reputation: 348

fadeIn div after image fade

Trying to fade in the text div on top of the images after they fade?

<div class="overlay">
  <div id="hover"></div>
</div>

<div class="pic_info">text</div>

$('.overlay, #hover_small').on('mouseenter', function() {
    $(this).find('#hover, .overlay_small, .pic_info').stop().animate({opacity: 0});
});

$('.overlay, #hover_small').on('mouseleave', function() {
    $(this).find('#hover, .overlay_small, .pic_info').stop().animate({opacity: 1});
});

http://jsfiddle.net/yNtm5/1/

Upvotes: 1

Views: 67

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206078

LIVE DEMO

HTML

  <div class="overlay">
      <div id="hover">
            <div class="pic_info"><h4><i><u>Motion</u></i></h4><h2><a href="#">'CREO' Experimental Short</a></h2></div>

      </div>
  </div>


#hover{
    background-image:url(img/creo.jpg); background-repeat:no-repeat;
    width:700px;
    height:300px;
    background: #000;
    display:none;
}
.overlay {
   background-image:url(img/fade/creo.png); background-repeat:no-repeat;
    width:700px;
    height:300px;
    background: red;
}
.pic_info{
    position:absolute;
    top:40px;
    left:100px;
    color:#fff;
}


$('.overlay, #hover_small').hover(function() {
    $('#hover, .overlay_small').stop().fadeToggle();
});

Upvotes: 0

Dan-Nolan
Dan-Nolan

Reputation: 6657

The animate method includes an optional callback parameter that you can use after the animation is complete. (.animate() documentation)

$('.overlay, #hover_small').on('mouseenter', function() {
    $(this).find('#hover, .overlay_small, .pic_info').stop().animate({opacity: 0}, function() {
        $('.pic_info').fadeIn();
    });
});

$('.overlay, #hover_small').on('mouseleave', function() {
    $(this).find('#hover, .overlay_small, .pic_info').stop().animate({opacity: 1}, function() {
        $('.pic_info').fadeOut();
    });
});

Fiddle

Upvotes: 1

Related Questions