Question

我对jquery很新，而且我收集了一些点点滴滴，我一直试图获得一定的效果。

效果：说我有一些#div。一旦页面加载，我希望它在一段延迟后消失，比如5000ms。但是我希望它在鼠标悬停的情况下再次显示并在mouseout上再次消失。

到目前为止：就像我说的那样，我很新，所以我可能犯了一些愚蠢的错误，或者这个问题可能有一个简单的解决方案，但我看起来和没有找到一个足够清楚，所以忍受我。我可以让两个效果分开工作，而不是一起工作。

要详细说明，使用这段代码，我可以隐藏#div页面加载，我正在思考，因为css只是制作div透明而不是隐藏/显示：无，我应该能够以不透明度重新出现：1。
此外，延迟似乎不起作用。（我试过并延迟了fadeOut（），但我猜这意味着我再也无法用那个div做多少了？）

$(document).ready( function() {
$("#div")
    .fadeOut()
    .delay(5000)
    .queue(function() {
        $(this).css("opacity","0").dequeue();
    })
});

我可以使用以下方法制作一个“鼠标悬停时出现+消失鼠标”效果：

$(document).ready(function(){
  $("#div").hover(function(){
    $("#div").css("opacity","1");
    },function(){
    $("#div").css("opacity","0");
  });
});

正如我之前所说，我使用不透明度的主要原因是因为隐藏div不会让我重新出现（据我所知）。

那么如何将两种效果结合起来呢？非常感谢任何帮助。
提前谢谢。

<小时/> 更新：对于任何有兴趣/后来偶然发现此页面的人：@kkemple的代码完美无缺;然而，我稍微修改它以显示鼠标输出后的一个很好的延迟，而不是快速消失的行为。（可能有更好的方法可以做到这一点;这就是我如何使用它。）

$(document).ready( function() {
    $("#div").hover(function(){
          $("#div").css("opacity","1");
            },function(){
        setTimeout(function(){
           $("#div").animate({'opacity': 0});
        },50);
    });

});

Answer 1

$(document).ready( function() {
    setTimeout(function () {
        $("#div")
            .animate({
                'opacity': 0
            }, 300); //you can set a speed just like fadeOut() or fadeIn()
    },5000);

    $("#div").hover(function(){
        $("#div").css("opacity","1");
    },function(){
        $("#div").css("opacity","0");
    });

});

jquery：延迟消失div;然后在悬停时出现/消失

1 个答案: