我正在尝试实现一种效果,当您将鼠标悬停在图像上时,它会放大,变暗,而另一个图像会向下滑动。我已成功实现此效果,但存在一个小问题。这是我的代码:
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);
});
这很有效;但是,如果您在图像上来回移动几次,<span class="dark"></span>
似乎没有受到影响。我看着我的firebug控制台,悬停时不透明度正在改变;但是,在视觉上,你看不到它变暗。任何想法为什么会这样?它在正常悬停时效果很好,但是如果你稍微玩一下,暗化效果就会消失。
答案 0 :(得分:1)
尝试将jQuery更改为:
$(".viewPort a").hover(function(){
$(this).find('img').stop().animate({
height: '300', left: '0', top: '0', width: '300'
}, 250);
$('span.dark').stop().fadeTo(600, 1); // .stop().fadeTo()
$('span.slide').stop().animate({
top: '80'
}, 600);
}, function(){
$('span.slide').stop().animate({
top: '-130'
}, 400);
$('span.dark').stop().fadeTo(400, 0); // .stop().fadeTo()
$('.viewPort img').stop().animate({
height: '330', left: '-20', top: '-20', width: '330'
}, 250);
});
在JSFiddle上为我工作:http://jsfiddle.net/bFUSX/(FF4)
答案 1 :(得分:0)
您应该将jumpToEnd
参数传递为true(以便快速完成动画),以便在黑暗范围内调用stop时工作。
这是演示: