JQuery advice on image animation

Question

klemme 3 Posting Whiz in Training

12 Years Ago

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

javascript jquery

Edited 12 Years Ago by klemme because: n/a

2 Contributors
7 Replies
203 Views
1 Day Discussion Span
Latest Post 12 Years Ago Latest Post by pritaeas

pritaeas 2,194 ¯\_(ツ)_/¯

12 Years Ago

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.
});

pritaeas 2,194 ¯\_(ツ)_/¯

12 Years Ago

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

Reply to this topic

Be a part of the DaniWeb community

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

klemme 3 Posting Whiz in Training · Answer 1 · 2012-02-20T22:48:08+00:00

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?

klemme 3 Posting Whiz in Training · Answer 2 · 2012-02-20T23:02:48+00:00

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 :-)

klemme 3 Posting Whiz in Training · Answer 3 · 2012-02-21T20:32:47+00:00

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>

klemme 3 Posting Whiz in Training · Answer 4 · 2012-02-22T00:30:41+00:00

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? :-)

pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster · Answer 5 · 2012-02-22T00:55:52+00:00

pritaeas 2,194 ¯\_(ツ)_/¯

12 Years Ago

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