如何使用 JQuery 修复此动画？答案

【问题标题】：How to fix this animation using JQuery?如何使用 JQuery 修复此动画？
【发布时间】：2012-01-12 06:08:57
【问题描述】：

我正在使用 JQuery 制作“阅读更多”按钮。当有人点击按钮时，会出现一个弹出窗口。这个弹出窗口实际上是一个隐藏的 div 出现。我的问题是，当我单击按钮时，我希望 div 从按钮中出现，当我单击弹出窗口上的十字标记时，它会返回到它起源的同一个按钮，但我得到的结果是，当我单击按钮，div 从中出现，而当我单击交叉时，它转到我单击第一个的“阅读更多”按钮。请帮我解决这个问题。我想我的代码中有一个小故障。我有它在小提琴http://jsfiddle.net/shivkumarganesh/qLEbD/

【问题讨论】：

标签： javascript jquery jquery-ui jquery-animate

【解决方案1】：

检查这个小提琴：http://jsfiddle.net/6uLF7/

问题在于存储目标左偏移和上偏移的变量的本地范围。

变化

在顶部添加了 2 个声明：

var readMoreInfoTop = 0;
var readMoreInfoLeft = 0;

从 click 处理程序内的 top 和 left 分配中删除了 var 关键字

readMoreInfoTop = readMoreOffset.top + 10;
readMoreInfoLeft = readMoreOffset.left + 10;

【讨论】：

+1 完美解决方案；你能指出你小提琴中的变化吗？？
@techfoobar 实际上最好的解决方案是从 readmoreinfo 块中删除 $('.cross').click 事件并单独提及它，然后为两个点击事件声明两个全局变量。 .. 全球仅 wrt 2 点击事件。你可以看这里jsfiddle.net/shivkumarganesh/qLEbD
@techfoobar 感谢您的帮助，弄清楚范围的事情很有用。 :)
+1 是的，这确实是最干净的解决方案（尽可能避免使用全局变量）。

【解决方案2】：

每次打开按钮时，都会向关闭按钮添加另一个侦听器。您可以在重新绑定之前取消绑定关闭的侦听器，例如。 http://jsfiddle.net/qLEbD/54/

或者更好……

绑定一次关闭侦听器（在按钮单击功能之外）并在按钮单击时存储左侧位置。

//doc ready...
function() {

  var leftPosition;

  $('.button').click(function() {
    //animate popup to open
    leftPosition = $(this).offset.left;
  });

  $('#close').click(function() {
    //animate popup to close using leftPosition
  });
}();

【讨论】：

我明白了，但避免出现错误是不明智的。这只是一个修复。不过谢谢。我已经更改了jsfiddle.net/shivkumarganesh/qLEbD 中的内容，请检查。