jQuery淡入，带有鼠标悬停淡入和淡出效果

如何解决jQuery淡入，带有鼠标悬停淡入和淡出效果

| 我试图完成的是页面加载的淡入效果，然后是一个很好的淡入淡出效果，并且在鼠标悬停在每个单独项目上时，您可以在这里查看我的工作：http://themes.thefragilemachine.com/themachine_v4/ 我知道可以使用儿童电话吗？我只是不确定如何做到这一点，但基本上我想拥有1个类，我可以应用于几乎所有的div并使用它的效果，至少对于鼠标而言，任何帮助都将是惊人的！谢谢！ 这是我的Jquery代码：

<script type=\"text/javascript\"> 
    $(document).ready(function() {

        window.onload = function() { $(\'.test1\').hide().fadeIn(1500); };

        $(\'.test1\').mouseover(function() { 
            $(\'.test1\').fadeOut(\'fast\').fadeIn(\'slow\'); 
        });
    });
</script> 

这是我的html代码：

<div class=\"featured-pitem g_4 test1\"></div>
<div class=\"featured-pitem g_4 test1\"></div>
<div class=\"featured-pitem g_4 test1\"></div>
<div class=\"featured-pitem g_4 test1\"></div>
<div class=\"featured-pitem g_4 test1\"></div>
<div class=\"featured-pitem g_4 test1\"></div>

    

解决方法

        您是否正在寻找这个？

$(\'.test1\').mouseover(function() {
    $(this).fadeOut(\'fast\').fadeIn(\'slow\');
});

使用

$(this)

只能将淡入淡出效果应用于当前元素，使用

$(\'.test1\')

可以将效果应用于所有类别为

test1

的元素。     ,        您正在document.ready内部分配\“ window.onload \”侦听器。但是document.ready在window.onload之后触发，因此您的代码没有任何作用。无论如何，当加载窗口时，还没有加载DOM，因此没有要选择的元素。您应该像这样重写它：

$(document).ready(function() {

$(\'.test1\').hide().fadeIn(1500);
$(\'.test1\').mouseover(function() { $(\'.test1\').fadeOut(\'fast\').fadeIn(\'slow\');  } );


});

顺便说一下，jQuery $ {document）有一个不错的快捷方式。ready（...）等于$（...），只需将函数放在$（...）调用中     ,        

<script type=\"text/javascript\"> 
$(document).ready(function() {

    $(\'.test1\').hide().fadeIn(1500);

    $(\'.test1\').mouseover(function() { $(this).fadeOut(\'fast\').fadeIn(\'slow\');  } );


});
</script>

对于衰落序列，您可以使用如下所示的内容：

<script type=\"text/javascript\"> 

$（document）.ready（function（）{

$(\'.test1\').hide();

$(\'.test1\').each(function(i){
        var timing = i*2+60;
        $(this).delay(timing).fadeIn(1500);
});





$(\'.test1\').mouseover(function() { $(this).fadeOut(\'fast\').fadeIn(\'slow\');  } );

}）;