如何使用JQuery修复此动画

How to fix this animation using JQuery?

本文关键字：动画 何使用 JQuery      更新时间：2023-09-26

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

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

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

更改

在顶部添加了2个声明：

var readMoreInfoTop = 0;
var readMoreInfoLeft = 0;

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

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

每次打开按钮时，都会向关闭按钮添加另一个侦听器。你可以先解除关闭侦听器的绑定，然后再重新绑定它。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
  });
}();
相关文章：