i trying achieve effect when hover on image, zooms in, darkens, , image slides down. have achieved effect successfully, there small problem. here code:
html
<div class="viewport"> <a href="#"><img src="<?php echo bloginfo('template_url'); ?>/images/penguin.jpg" alt="penguin"> <span class="dark"></span><span class="slide"></span></a> </div> css
.viewport{float:left; position:relative; border:8px solid #60b1d0; height:300px; width:300px; overflow:hidden;} .viewport a{display:block;} .viewport img{ position:relative; top:-20px; left:-20px; height:330px;} .viewport span.dark{background:url(images/trans.png) repeat; width:100%; height:100%; position:absolute; top:0; left:0; z-index:10; display:none;} .viewport span.slide{top:-130px; left:84px; position:absolute; z-index:100; width:130px; height:130px; background:url(images/badge.png) no-repeat;} jquery
$(".viewport a").hover(function(){ $(this).find('img').stop().animate({ height: '300', left: '0', top: '0', width: '300' }, 250); $('span.dark').fadein(600); $('span.slide').stop().animate({ top: '80' }, 600); }, function(){ $('span.slide').stop().animate({ top: '-130' }, 400); $('span.dark').stop().fadeout(400); $('.viewport img').stop().animate({ height: '330', left: '-20', top: '-20', width: '330' }, 250); }); this works great; however, if hover , forth on image few times, <span class="dark"></span> doesn't seem affected. looked @ firebug console, , opacity changing on hover; however, visually, not see darkening. ideas why happening? works great on normal hovers, if play little bit, darkening effect disappears.
you should pass jumptoend argument true (so animation completed quickly) work while calling stop on dark span. here demo:
Comments
Post a Comment