0

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

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

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

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

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

在运行制作此动画的 jQuery 时，我存储了一个值，该值pos保持被单击图标的原始位置。这样当用户单击“返回”时，它将返回到正确的位置。pos是一个存储leftandtop值的对象，因此可以通过pos.topand访问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。浏览至少 2 个单独的图标序列以查看完整效果。

4

2 回答 2

3

如果将范围移动pos到回调之外，一切正常。

编辑：更新小提琴http://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;在绑定之前添加，并var从设置的语句中删除了pos.

编辑：

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

所以我将绑定移到了点击事件之外。在这样做的过程中，我也不得不扩大“复制”的范围。

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 () {
于 2013-08-20T19:32:36.880 回答
0

如果将 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 = '';
于 2013-08-20T19:34:58.593 回答