如何淡出 1 个 div 并淡入 2 个 div，然后在 10 秒不活动后，再次淡入第一个 div，并淡出 2 个 div？

发布于 2024-09-15 22:06:17 字数 544 浏览 9 评论 0原文

这是我当前的代码：

$(function() {          
        $('#header_left').click(function(){
            $('#header_left_info').fadeOut('fast');
            $('#header_left').fadeOut('fast');
            $('#header_left_back').delay(250).fadeIn('fast');
        });
});

（250 毫秒的延迟是为了使淡入淡出不会发生冲突）

无论如何，我想修改此现有代码，以便它淡出 #header_left_back 并返回 #header_left - 但是仅在用户不活动 10 秒后。这应该很简单，但对于以前没有 jQuery 经验的网页设计师来说 - 这真的很难。我敢打赌，你们编码员可以在 20 秒内解决这个问题！

谢谢你！

这个问题已经得到解答。谢谢！

原文

This is my code currently:

$(function() {          
        $('#header_left').click(function(){
            $('#header_left_info').fadeOut('fast');
            $('#header_left').fadeOut('fast');
            $('#header_left_back').delay(250).fadeIn('fast');
        });
});

(the 250 millisecond delay is so that the fades don't conflict)

Anyway, I'd like to modify this existing code so that it fades #header_left_back out, and #header_left back in - but only after 10 seconds of inactivity by the user. This should be simple, but for a web designer with no previous jQuery experience - it's really hard. Betcha you coders can figure this out within 20 seconds!

Thank you!

This question has been answered. Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

生生漫 2024-09-22 22:06:17

我想你正在追求这样的事情：

$(function() {          
  $('#header_left').click(function(){
    $('#header_left_info, #header_left').fadeOut('fast');
    $('#header_left_back').delay(250).fadeIn('fast');
  });

  var timer;
  $(document).bind("keypress mousemove", function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
              $('#header_left_back').fadeOut('fast', function() {
                $('#header_left').fadeIn('fast');
              });
            }, 10000);
  });
});

10秒没有鼠标移动或键盘操作后，它会反向淡入淡出，将它们交换回来。如果需要，您可以添加更多事件，例如 mousewheel、mousedown，具体取决于您的需要。每次发生事件时，我们都会开始 10 秒倒计时，如果发生另一个事件，我们会清除超时并重新开始 10 秒，因此只有 10 秒的空闲时间才会使淡入淡出反向发生。

I think you're after something like this:

$(function() {          
  $('#header_left').click(function(){
    $('#header_left_info, #header_left').fadeOut('fast');
    $('#header_left_back').delay(250).fadeIn('fast');
  });

  var timer;
  $(document).bind("keypress mousemove", function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
              $('#header_left_back').fadeOut('fast', function() {
                $('#header_left').fadeIn('fast');
              });
            }, 10000);
  });
});

After 10 seconds of no mouse movement or keyboard action, it would go the fade in the reverse, swapping them back. You could add more events if needed, e.g. mousewheel, mousedown, as specific as you needed to be. Every time an event happens we start a 10 second countdown, if another event happens we clear the timeout and start the 10 seconds over, so only 10 seconds of idle makes the fades happen in reverse.

回复收藏 0 原文