Question

首先，代码的一些可视化。我有以下从jquery生成动态的图像。它们是根据用户要求制作的：

<img id="i13133" src="someimage.jpg" />
<img id="i13232" src="someimage1.jpg" />
<img id="i14432" src="someimage2.jpg" />
<img id="i16432" src="someimage3.jpg" />
<img id="i18422" src="someimage4.jpg" />

我有一个AJAX循环，使用jQuery每15秒重复一次，它包含以下代码：

注意： if语句位于Ajax循环中。

其中imgId是来自Ajax调用的请求ID。

//Passes the IDs retrieved from Ajax, if the IDs exist on the page the animation is triggered.
if ( $('#i' + imgId ).length )
{

var pickimage = '#i' + imgId;

var stop = false;

function highlight(pickimage) {
   $(pickimage).animate({color: "yellow"}, 1000, function () {
      $(pickimage ).animate({color: "black"}, 1000, function () {
         if (!stop) highlight(pickimage);
      });
   });
}

// Start the loop
highlight(pickimage);

}

即使有多个图像，效果也很好。但我最初使用的只有一张图片。

问题是我需要一个中断。类似的东西：

$(img).click(function () {
   stop = true;
});

有两个问题：

1.）这显然会停止所有动画。我无法理解如何编写仅停止点击图像动画的内容。

2.）Ajax检索ID，有时这些ID每隔几分钟出现一次以上，这意味着如果图像存在，它会在彼此的顶部重复动画。我可以使用一些帮助来弄清楚如何检测动画是否已经在图像上运行，如果已经在图像上触发了动画，则不执行任何操作。

Answer 1

你可以一石二鸟;）

1）不要使用stop变量。为每个img添加一个类：

// Instead of: var stop = false;
$(pickimage).addClass("animating");

// Instead of: if (!stop) highlight(pickimage);
if ($(pickimage).hasClass("animating")) highlight(pickimage);

// Instead of: $(img).click(function () { stop = true; });
$(img).click(function () { $(this).removeClass("animating"); });

2）同样的事情，检查课程！

if ($(pickimage).hasClass("animating")) return;

使用Ajax请求突出显示图像边框

1 个答案: