在同一选择器上的 jquery 中同时触发两个事件答案

【问题标题】：fire two events simultaneously in jquery on same selector在同一选择器上的 jquery 中同时触发两个事件
【发布时间】：2012-11-29 05:08:44
【问题描述】：

这应该很容易，但我是新手...

如何使显示功能和点击动画功能合二为一？

function scrollit() {
    $("#scrollDown").show();
    $("#scrollDown").click(function() {
        $('html,body').animate({scrollTop: $('#scrollDown').offset().top}, 1500);
    });
}

见：http://jsfiddle.net/elasticGurl/3r6Jp/4/

应该发生的事情是

按钮被点击
隐藏的div向下滚动显示
在#2的同时，也应该同时向下移动一点

问题是它需要点击两次才能向下移动。

【问题讨论】：

标签： jquery simultaneous

【解决方案1】：

那是因为你的点击功能在你隐藏的 div 上，而不是在你的按钮上

function scrollit() {

    $("#scrollDown").show();
    $('html,body').animate({scrollTop: $('#scrollDown').offset().top}, {duration:1500, queue:false});
}

【讨论】：

附注我会放弃 scrollit 功能，只需将点击绑定放在按钮上
好的，我更改了它（相同的 js fiddle URL），但我仍然需要单击它两次才能移动它。你可以在这里看到结果：jsfiddle.net/elasticGurl/23wKx/4/embedded/result
如何将点击绑定放到按钮上？
jsfiddle.net/23wKx/5我在动画上添加了一个额外的属性，让它与节目同时执行
$("#button").click(...) 将绑定点击事件，这需要在 $(document).ready(function() { /*binding这里*/});

【解决方案2】：

您只是绑定了单击事件，您也需要触发该事件：

function toggleDiv() {

$("#scrollDown").show().click(function() {
  $('html,body').animate({scrollTop: $('#scrollDown').offset().top}, 1500);
});
   $("#scrollDown").click();
}

【讨论】：

太棒了。谢谢！但是如何消除动作的延迟呢？如果您注意到，它会在将 div 向下移动之前稍等片刻。新代码：jsfiddle.net/elasticGurl/23wKx/2
我建议你删除点击事件并触发动画，每次点击红色的东西时它都会切换：function toggleDiv() { $("#scrollDown").show(); $('html,body').animate({scrollTop: $('#scrollDown').offset().top}, 800); }

【解决方案3】：

这是工作示例：http://jsfiddle.net/FSfRR/1/

   var count = 0;
   $(".checkout_btn").click(function() {
       $("#scrollDown").show();
      count++;
      $('html,body').animate({scrollTop: $('#scrollDown').offset().top}, 1500);
      if(count==1)
          $(this).trigger('click');
      else 
          count = 0;
   });

【讨论】：

你可以使用.one()代替计数
不同意，这里是递归调用
这适用于 chrome、safari 和 ff！谢谢！我如何使用一个（）；我试过了，但它停止了工作。我很想知道语法。再次感谢！
您的答案有效，但下面的答案 (Koenyn) 较短。不管怎么说，还是要谢谢你！！ :)

【解决方案4】：

试试 jQuery 1.8.2

$(document).on('click','p#scrolltest', function (){
  $("div#scrollDown").show('fast', function(){
       $('body').animate({
           scrollTop: $('#scrollDown').offset().top
           }, 1500);
        });
});

Working Demo

【讨论】：

谢谢你，但我实际上需要它向下滚动而不是只显示 div。至少这对我来说是这样的。它将在移动设备上，因此当他们单击按钮时，页面会向上滚动一点以显示表单。这有意义吗？
现在不是一键向下滚动了吗？请检查一下
在我的屏幕上（你的 jfiddle），它只是显示表单，但不会让它向上移动。
我尝试这样放置坐标：.offset({ top: 0, left: 0 }) 但它只是与按钮重叠
请检查我的 HTML 标记。我也更新了 CSS。现在检查