Question

我一直在尝试许多没有解决方案的路线：我试图将鼠标悬停在一个元素上，淡出一个子元素，暂停一段时间，然后再次重新淡化同一个子元素。我正在尝试.queue，和.stop一起在这里 - 不工作。尝试了很多变化。

$('.project').mouseover(function(){
    $('.skill h2', this).fadeOut(500).queue(function(){
        $(this).stop(true,true).fadeIn(400);
    });
});

Answer 1

尝试使用 .delay() ：

设置计时器以延迟执行队列中的后续项目

$('.project').mouseover(function(){
    $('.skill h2', this).fadeOut(500).delay(1000).fadeIn(400);
});

Answer 2

我想你想要做的是保持父元素不变。 FadeOut将导致display：none到div，因此除非你给它一个固定的高度和宽度，否则你的父元素会崩溃。

此外，您在jquery调用中添加了“this”，这也将导致父元素或调用元素进入淡出。

将此添加到您的CSS。

.project{
    height:80px;
    width:367px;
}

或任何维度。

让你的jquery像这样

 $('.project').mouseenter(function(){
    $('.skill h2').fadeOut(500,function(){
       setTimeout(function(){
         $('.skill h2').fadeIn(400);console.log('here');
        },1000);
    });
  });

看看这个小提琴。 http://jsfiddle.net/khT5L/6/

jQuery悬停元素fadeout / fadein子元素没有循环

2 个答案: