清除javascript对象以修复jquery动画

Question

我正在创建一个关于跑步伤害和预防的交互式移动信息页面。以下是它的工作原理：

页面上有8个图标对齐。当用户单击一个图标时，所有其他图标都会逐渐消失，而被单击的图标将动画显示在屏幕顶部。

从这里开始，会出现一些与该图标相关的信息文本（该文本没有显示在jsfiddle中。它与我的问题无关）。

后退按钮也将与文本一起出现。如果用户单击后退按钮，文本将消失，图标将动画化回其原始位置。

移动图标本身是使用jQuery clone创建的。动画和样式将应用于克隆，当它返回到原始位置时，它将被隐藏。

当运行制作此动画的jQuery时，我会存储一个值pos，该值将保持单击的图标的原始位置。这样，当用户单击"返回"时，它将返回到正确的位置。pos是存储left和top值的对象，因此通过pos.top和pos.left进行访问。以下是其中的一个片段。这存储了我的原始位置：

$gridImg.click(function() {
    ...
    $clone = $(this).clone();
    var pos = $(this).position();
    $clone.css({
        position: 'absolute',
        left: pos.left,
        top: pos.top
});

以下是每个图标的HTML片段（图像已被替换为令人毛骨悚然的微笑：

<div class="rice-injury-grid">
    <!-- first icon -->     
    <div data-title="rest" class="grid-img">
        <img id="rest-img"  alt="Rest" src="http://icons.iconseeker.com/png/64/sketchcons-x/smiley-3.png"/>
    </div>
    <!-- second -->
    <div data-title="blister" class="grid-img">
        <img id="blister-img" alt="Blisters" src="http://icons.iconseeker.com/png/64/sketchcons-x/smiley-3.png"/>
    </div>
    <!-- third -->    
    <div data-title="ice" class="grid-img">
        <img id="ice-img" alt="Ice" src="http://icons.iconseeker.com/png/64/sketchcons-x/smiley-3.png"/>
    </div>
    <!-- and so on... -->

我的问题是：在使用该应用程序的整个过程中，每次用户选择图标时，它都会无限期地存储pos值，所以现在每次我按下"后退"按钮时，图标都会返回到以前选择的每个位置。

我正在寻找一种方法，每当图标返回到其原始位置时，都可以清除pos值。

有关演示，请参阅jsfiddle。浏览至少两个单独的图标序列，以查看完整效果。

Answer 1

如果将pos的作用域移动到回调之外，则一切都很好。

编辑：更新fiddlehttp://jsfiddle.net/YjWkn/3/

var pos;
$gridImg.click(function () {
    var imgId = "#" + $(this).attr('id');
    var title = $(this).data('title');
    var copy = "#" + title + "-copy";
    $gridImg.fadeOut(200);
    $clone = $(this).clone();
    pos = $(this).position();

我只是在绑定之前添加了var pos;，并从设置pos的语句中删除了var。

编辑：

您遇到的第二个问题是，每次单击图标时都会绑定后退按钮。因此，第一次点击返回时，它会发射一次，第二次发射两次，第三次发射3次，依此类推

所以我把绑定移到了click事件之外。在这样做的过程中，我也不得不扩大"复制"的范围。

var pos;
    var copy;
    $backBtn.click(function () {
            $(copy).fadeOut(200);
            $backBtn.fadeOut(200);
            $clone.animate({
                width: '50%',
                top: pos.top,
                left: pos.left
            }, 300);
            setTimeout(function () {
                $clone.fadeOut(200);
                $gridImg.fadeIn(200);
            }, 300);
        });
    $gridImg.click(function () {

Answer 2

如果您将pos设置为全局JS变量，然后在返回按钮函数的末尾清除它，那么它就可以完美地工作。

更新的JSFiddle：http://jsfiddle.net/YjWkn/4/

全球：

var pos;
$gridImg = $('.grid-img');

设置：

pos = $(this).position();

清除：

setTimeout(function() {
    $clone.fadeOut(200);
    $gridImg.fadeIn(200);
}, 300);
pos = '';