1

我有 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) 将显示 2700 毫秒延迟
3. 每当我将光标指向 (div id=#click), (div id=#card12) 将向上滑动

我的问题是：
1. 我在 2700 毫秒之前不小心将光标指向 (div id =#click) 区域（(div id=#click) 出现的延迟）
2. 而不是忽略它， (div id=# card12) 在 (div id=#click) 完全加载后立即响应（向上滑动）

例如：我将光标指向 (div id=#click) 区域，然后将光标移出该区域外来回在 2700 毫秒之前 2 次（出现 (div id=#click) 之前的延迟）。

只要 (div id=#click" 已完全加载 (即使我的光标在加载时位于 (div id=#click) ) 区域之外

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

PS：我知道如果我可以使用 codePen/jsFiddle 来执行它会更容易。但我不知道如何使用 codePen/jsFiddle 使用 2 jquery-(ies?)

非常感谢

4

3 回答 3

1

您可能需要考虑在 click 函数中添加悬停绑定，如下所示：

$(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);
            });
        });
    });
});
于 2013-01-11T21:36:58.100 回答
0

将悬停 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);
      });
    });
  });
});
于 2013-01-11T21:37:19.383 回答
0

如果我理解正确，您的#click 元素会在延迟后显示，然后您才希望用户能够单击它并显示卡片元素。一个简单的解决方法是使用 display:none 与 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() 类型选择器以获得正确的元素. 但是，由于您似乎使用 ids 作为选择器而不是类，我假设页面上的每个元素只有一个，并且使用 ids 作为选择器应该没问题。基本上我的代码在 2700 毫秒后分配悬停事件侦听器，这就是 setTimeout 的用途。

于 2013-01-11T21:38:37.203 回答