0

我最近使用了一个不错的小 jquery 脚本，它可以按顺序加载具有给定类的图像，并在页面加载时将它们逐个淡化。

jQuery

$(function() {
$(".faded").hide()    
$(".faded").each(function(i) {
    $(this).delay(i * 100).fadeIn(500);
});
});

示例 HTML

<div class="faded"><img class="someclass" src="images/example1.jpg" /></div>
<div class="faded"><img class="someclass" src="images/example1.jpg" /></div>
<div class="faded"><img class="someclass" src="images/example1.jpg" /></div>
<div class="faded"><img class="someclass" src="images/example1.jpg" /></div>
.....

可以在此处查看此操作的示例http://comill.com/animation/

这让我想到创建一个以类似方式加载图像的翻转或悬停脚本会非常好。

例如，在上面给出的演示链接中，只有绿色圆盘在页面上可见，当用户将鼠标悬停在该圆盘上时，花瓣会一一淡入。理想情况下，花瓣会在鼠标移出时立即全部消失。

我花了一段时间研究这个，觉得它应该很容易实现，但是到目前为止，我在通过谷歌搜索时还没有找到解决方案，所以如果有人可以提供解决方案，任何帮助将不胜感激。

4

1 回答 1

2

.hover()在绿色磁盘元素上使用 a

对于你的例子，给下面的代码一个旋转

$(document).ready(function(){
    var faded = $(".faded");
    faded.hide();
    $('#midbut').hover(function(){
        // mouseenter
        faded.each(function(i) {
            $(this).delay(i * 100).fadeIn(500);
        });
    }, function(){
        // mouseleave
        faded.fadeOut(500);
    });
});

如果你可以在页面初始化上使用 css 来隐藏元素，你也不应该用 jquery 隐藏元素

于 2011-11-21T18:19:33.480 回答