Hi Guys,

This is the image I am animating (The html surrounding it):

<div class="index_top_left_img">

<img src="products/wrangler-jeans.gif" width="198" class="IndeximgOpa" />

</div>

I have this few lines which fades the images in and out:

$(function() {
            $('.IndeximgOpa').each(function() {
                $(this).hover(
                    function() {
                        $(this).stop().animate({ opacity: 1.0 }, 500);
                    },
                   function() {
                       $(this).stop().animate({ opacity: 0.70 }, 500);
                   })
                });
        });

It looks fine, and also works fine.

What I would like to do now, is when the animation is done (The opacity is 1.0) I would like to, from the bottom of the image, (or is it the div surrounding it?) to animate a div moving up from the bottom (While also fades in), where I can write a few lines of product information.
It should animate up after the image is fully visible, and dissapear again onmouseout, just like the opacity goes back to 0.70.

I havent used Jquery much before to be honest, and im not sure how to do it.

I guess I could place a div just after the <img /> tag, but inside the other div?
And then somehow animate it on top of the image?

How can this be done? Can I write a few simple lines to the existing function?
I have read about toggle, but again, im not the best on javascript/JQuery, so :-/

Help is very much appreciated?

Regards, Klemme

Recommended Answers

If you look at the manual, you can see that you can pass a complete function to animate. If you provide this, that function will trigger once the animation is done.


Jump to Post

It's possible the position absolute is causing this, but you may get some better help in the HTML/CSS forum.

Jump to Post

All 7 Replies

If you look at the manual, you can see that you can pass a complete function to animate. If you provide this, that function will trigger once the animation is done.

$(this).stop().animate({ opacity: 1.0 }, 500, function(){
  // your next animation code goes here.
});

So doing this:

<div class="index_top_left_img">
            <img src="products/wrangler-jeans.gif" width="198" class="IndeximgOpa" />
            <div id="info_div">TEST...</div> -- Div to slide/fade up on hover
        </div>

And somthing like this:

$(function() {
            $('.IndeximgOpa').each(function() {
                $(this).hover(
                    function() {
                        $(this).stop().animate({ opacity: 1.0 }, 500);
                    },
                   function() {
                       $(this).stop().animate({ opacity: 0.70 }, 500);
                   })
                });
        });

/* And then integrate something like this? - Only when i try i get it wrong and nothing happens */

$("#index_top_left_img").hover(function(){
  $("#info_div").animate({marginTop:0}, 300);
},function(){
  $("#info_div").animate({marginTop:-25}, 300);
});

What CSS should be applied to this div (<div id="info_div">TEST...</div> ) - As i only want to display it on hover?

Should that be done with css or with Jquery?

Or something like this:

$('.index_top_left_img').hoverIntent(
     function() { // over
        $(this).find('.info_div').slideDown();
     },
     function() { // out
        $(this).find('.info_div').slideUp();
     }
);

Which I cant get to work either :-)

Got this working, except the "info_div" only slides up over the last image.

So if I hover over the first or second image, the "info_div" slides over the last image..

This is the code: (does someone know how to fit each "info_div") to its parent image??

<!DOCTYPE HTML>
<html>
<head>

<style type="text/css">
.IndeximgOpa {opacity:0.7; filter:alpha(opacity=70);}
.info_div {width:198px; height:75px; background-color:#333; color:#FFF; text-align:center; opacity:0.95; filter:alpha(opacity=95);  position:absolute; bottom:0px; display:none;}
.index_top_left_img {width:198px; height:248px; background-color:#F3F3E4; float:left; margin-right:9px; border:1px solid #CCC; position: relative;}
#index_top_left {width:628px; height:308px; float:left; border:1px dashed #CCC; background-color:#F3F3E4; padding-left:10px; padding-top:8px;}
</style>

<meta charset="utf-8">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

<script type="text/javascript">
      $(function() {
        $('.index_top_left_img').each(function() {
          elm = $(this);
          $(this).mouseenter(
          function() {
            elm.find(".IndeximgOpa").animate({ opacity: 1.0 }, 500, function(){
              elm.find('.info_div').show("slide", { direction: "down" }, 500);
            });
          }).mouseleave(
          function() {
            elm.find(".IndeximgOpa").animate({ opacity: 0.70 }, 500, function(){
              elm.find('.info_div').hide("slide", { direction: "down" }, 500);
            });
          })
        });
      });
</script>

<title>JQuery slide on top of image - animation</title>

</head>

<body>

<div id="index_top_left">
<!-- The next divs are the ones to be animated: "index_top_left_img" -->
<!-- Meaning that "info_div" should slide up over the img inside the div class: "index_top_left_img"
-->    	
       <div class="index_top_left_img">
        	<img src="img/wrangler-jeans.gif" width="198" class="IndeximgOpa" />
        	<div class="info_div">Produkt information til jeans...</div>
      	</div>
 
              
        <div class="index_top_left_img">
        	<img src="img/vanucci-jakke.gif" width="198" class="IndeximgOpa" />
        	<div class="info_div">Produkt information til jakke...</div>
        </div>  
              
        <div class="index_top_left_img">
        	<img src="img/wrangler-skjorte.gif" width="198" class="IndeximgOpa" />
        	<div class="info_div">Produkt information til skjorte...</div>
        </div>
<!-- Herefter er der ikke mere der skal animeres -->
</div> <!-- SLUT på wrapper: "index_top_left" - DIV -->

</body>
</html>

It's possible the position absolute is causing this, but you may get some better help in the HTML/CSS forum.

I am pretty sure it is the JS.

If I take out the positioning from the CSS, it is the same except that the "info_div" shows under the image instead of sliding up over it.

And it has the same text inside the info-div (the text from the last div) every time, so the JS code doesnt notice the other divs/images/info_divs..

Is someone able to spot why? :-)

Have you tried next() instead of find() ?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.