Question

我有2个jquery函数：

$(document).ready(function(){
        $("#title").click(function(){
            $("#click").delay(2700)
                    .css({opacity: 0.0, visibility: "visible"})
                        .animate({opacity: 0.5
                      });
                 });
             });

和

$(document).ready(function(){
    $("#click").hover(
        function () {
          $("#card12").animate({top:'220px'},100);}, 
        function () {
          $("#card12").animate({top:'330px'},100);
         });
    });

这是如何工作的：
   1.我点击（div id = #title）
   2.（div id = #Click）将显示延迟2700ms
   3.每当我将光标指向（div id =＃click）时，（div id =＃card12）都会向上滑动

我的问题是：
1.我在2700ms之前意外地将光标指向（div id = #Click）区域（（div id =＃click）延迟显示）
2.（div id = #card12）完全加载后，（div id = #card12）响应（div id =＃click）而不是忽略它

例如：我将光标指向（div id = #Click）区域，并在2700ms之前来回移动该区域外的光标2次（之前的延迟（div id = #Click）显示）。

而不是忽略那2个初始悬停（在（div id = #clicks）之前），jQuery将滑动（div id =“＃card12”）两次，只要（div id =＃click“已经完全加载（即使我的光标在加载时仍在（div id =＃click）区域之外

我的问题是：
可以忽略2700ms之前发生的事情（#click延迟出现之前）？

P.S：我知道如果我能用codePen / jsFiddle执行它会更容易。但我不知道如何使用2 jquery-（ies？）

使用codePen / jsFiddle

非常感谢

Answer 1

您可能需要考虑在点击功能中添加悬停绑定，如下所示：

$(document).ready(function(){
    $("#title").click(function(){
        $("#click").delay(2700)
            .css({opacity: 0.0, visibility: "visible"})
            .animate({opacity: 0.5})
            .hover(
                function () {
                    $("#card12").animate({top:'220px'},100);}, 
                function () {
                    $("#card12").animate({top:'330px'},100);
            });
        });
    });
});

Answer 2

将你的悬停jQuery放在第一个动画jQuery的回调中。

$(document).ready(function () {
  $("#title").click(function () {
    $("#click").delay(2700).css({opacity: 0.0,visibility: "visible"}).animate({
      opacity: 0.5}, function () {
      $("#click").hover(function () {
        $("#card12").animate({top: '220px'}, 100);
      },function () {
        $("#card12").animate({top: '330px'}, 100);
      });
    });
  });
});

Answer 3

如果我理解正确，您的#click元素会在延迟后显示，然后您才希望用户能够点击它并显示卡片元素。一个简单的解决方法是使用display：none vs. visibility：hidden。这可能是也可能不是一种选择。可见性的好处在于您的元素保持其空间，但有很多方法可以解决这个问题。如果使用display：none不是一个选项，我认为你想要实现的目标可以通过以下方式完成。

$(document).ready(function(){
    $("#title").click(function(){
        setTimeout(function(){
            $("#click").css({opacity: 0.0, visibility: "visible"}).animate({opacity:0.5});
            $("#click").hover(
                function () {
                    $("#card12").animate({top:'220px'},100);}, 
                function () {
                    $("#card12").animate({top:'330px'},100);
                }
            );
        },2700);
    });
});

我看不到你的代码，但假设你的#click元素是你的#title元素的子元素，我会使用上面的代码，但是将#click更改为$（this）.children（）类型选择器以便得到正确的元素。但是，由于看起来你使用id作为选择器而不是类，我假设页面上每个元素只有一个，并且使用id作为选择器应该没问题。基本上我的代码在2700毫秒之后分配悬停事件监听器，这就是setTimeout的用途。

功能是否可以延迟而不是延迟？

3 个答案: