【问题标题】:jquery: disappear div with delay; then appear/disappear on hoverjquery:延迟消失 div;然后在悬停时出现/消失
【发布时间】:2013-12-24 15:11:32
【问题描述】:

我对 jquery 还很陌生,我收集了一些零碎的东西,我一直在努力获得一定的效果。

效果:说我有一些#div。页面加载后,我希望它在延迟一段时间后消失,比如 5000 毫秒。但是然后我希望它在鼠标悬停的情况下再次显示并在鼠标悬停时再次消失。

到目前为止: 就像我说的,我很新,所以我可能犯了一些愚蠢的错误,或者这个问题可能有一个足够简单的解决方案,但我看了但没有找不到足够清晰的,所以请耐心等待。我可以让这两种效果分开工作,而不是一起工作。

详细说明,使用这段代码,我可以在页面加载时隐藏#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);
    });

});

【问题讨论】:

    标签: jquery delay mouseover opacity mouseout


    【解决方案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");
        });
    
    });
    

    【讨论】:

    • 效果很好@kkemple!非常感谢。知道为什么延迟在我的第一段代码中不起作用吗?
    • 我相信如果你只是在fadeOut之前调用延迟它应该可以工作,它就像setTimeout函数一样工作
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-03-21
    • 1970-01-01
    • 1970-01-01
    • 2021-06-25
    • 2014-06-12
    • 1970-01-01
    相关资源
    最近更新 更多