CODEWITHSUNDEEP
jqueryanimationhyperlink
s0-0s
s0-0s

Reputation: 144

jquery animation doesn't work after setting link

I have a hover animation on JQUERY on an image. another image slides up. It works perfect when images are not linked to an url. Its ok when i added the tag in bottom image but when i add to the image moves over, the animation doesnt work.

here's my jquery code:

<script type="text/javascript">
$(function() {
    $('.wrap').hover(function() {
        $(this).children('.front').stop().animate({ "top" : '-100px'}, 700);   
    }, function() {
        $(this).children('.front').stop().animate({ "top" : '0px'}, 400);       
    });
});

and here's my css and html code

<style type="text/css">

#container {
height:100px;
text-align: center;
margin: auto;
}

.wrap {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
float: left;
padding: 0 1em;
}

img {
position: relative;
top: 0px; left: 0px;
}
img.front {
position: relative;
top: 100px; 
}
body
{ 
background-image:url('bgimage.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right bottom; 
}
</style>
</head>


   <body>
 <div id="container">
<div class="wrap">
   <a href="ascolta.php"> <img src="radio.png" alt="image" /></a>
      **<a href="ascolta.php">** <img src="radio_h.png" class="front" alt="image" /></a>
 </div>
   <div class="wrap">
    <img src="chat.png" alt="image" />
    <img src="chat_h.png" class="front" alt="image" />
 </div>
   <div class="wrap">
    <img src="programms.png" alt="image" />
    <img src="programms_h.png" class="front" alt="image" />
 </div>
    <div class="wrap">
    <img src="gallery.png" alt="image" />
    <img src="gallery_h.png" class="front" alt="image" />
 </div>
</div>

In the code when i add the starred tag, the related animation stops working.

Thank you very much. best,

Upvotes: 0

Views: 165

Answers (1)

Aleksandr M
Aleksandr M

Reputation: 24396

You are using .children which travels only single level down the DOM. Use .find instead.

Change this:

$(this).children('.front').stop().animate({ "top" : '-100px'}, 700);
$(this).children('.front').stop().animate({ "top" : '0px'}, 400);

to

$(this).find('.front').stop().animate({ "top" : '-100px'}, 700);
$(this).find('.front').stop().animate({ "top" : '0px'}, 400);

Upvotes: 1

Related Questions