题
我有一个HTML结构是这样的:
<ul id="carousel" class="jcarousel-skin-photos">
<li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
<li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
<li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
<li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
<li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
<li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
<li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
<li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
<li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
<li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
</ul>
<a href="javascript:;" id="zoom">Yakınlaştır</a>
和一个小的jQuery代码段淡入/淡出效果:
$('ul#carousel li a').hover(
function() {
$('a#zoom').fadeIn('fast');
},
function() {
$('a#zoom').fadeOut('slow');
});
在结束我想a#zoom
元件上悬停时显示ul#carousel li a
元件。但/有奇怪上淡入淡出效果。
这是我的工作页面。你可以在网上查看。
因此,如何我可以解决这个奇怪?
解决方案
的问题是存在的,因为当在变焦的鼠标指针移动的图标它不再被认为在转盘所以淡出踢英寸当淡出完成鼠标指针是突然超过转盘因此淡入再次开始。
我假定奇数行为是眨眼出变焦图标。
要解决这个问题,你必须取消淡出当鼠标移过缩放图标通过添加悬停事件处理程序来缩放图标本身。
其他提示
我固定这个奇怪与此代码:
$('a#zoom').mouseover(function() {
$(this).stop();
});
由于文森特。
不隶属于 StackOverflow