Question

我最近使用了一个漂亮的小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/

查看此实例的示例

这让我觉得创建一个以类似方式加载图像的翻转或悬停脚本会很不错。

例如，在上面给出的演示链接中，只有绿色光盘可以在页面上看到，当用户在这张光盘上盘旋时，花瓣会一个接一个地褪色。理想情况下，花瓣会在鼠标移动时立即淡出。

我花了一段时间研究这个并认为它应该相当简单，但是到目前为止我还没有找到解决方案，所以如果有人能提供解决方案，任何帮助将不胜感激。

Answer 1

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

为您的示例，请提供以下代码旋转

$(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);
    });
});

如果你可以在页面init上用css做这个，你也不应该用jquery隐藏元素

如何使用Jquery在mouseover上顺序加载图像

1 个答案: