Question

我想要完成的是页面加载的淡化效果，然后是一个漂亮的淡出效果，并且对于每个单独项目的鼠标结束，你可以看到我在这里工作的内容：http://themes.thefragilemachine.com/themachine_v4/

我知道这可以通过儿童电话来完成吗？我只是不知道该怎么做，但基本上我想有一个类我可以申请真正的任何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>

Answer 1

你也许正在寻找这个吗？

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

使用$(this)只应将淡化效果应用于当前元素，使用$('.test1')将效果应用于类test1的所有元素。

Answer 2

您正在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（...）等于$（...）有一个很好的快捷方式，只需将函数放入$（...）调用

Answer 3

<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');  } );

}）;

JQuery淡入，鼠标超过fadein和out效果问题

3 个答案: