jQuery - 需要帮助停止点击命令的动画

Posted 2023-05-08

【中文标题】jQuery - 需要帮助停止点击命令的动画

【英文标题】：jQuery - Need help stopping animation on click command

【发布时间】：2011-01-29 12:04:47

【问题描述】：

在您的帮助下，我能够完美地获得想要工作的 jquery，除了一件事..当我点击按钮时动画不会停止。

场景： 我有一个图像，下面有 3 个按钮，分别标记为“1”、“2”和“3”。 jquery 将每 4500 毫秒自动执行一次点击功能，并从 1 切换到 2，然后从 2 切换到 3 并不断循环。但是问题是，如果我手动单击 1、2、3 按钮，动画不会停止。

有什么想法可以做到这一点吗？

jQuery：

var tabs;
var len;
var index = 1;
var robot;

function automate() 
    tabs.eq((index%len)).trigger('click');
    index++;


robot = setInterval(automate, 5500);

jQuery(document).ready(function()
    jQuery(".imgs").hide();
 jQuery(".img_selection a").click(function()
        stringref = this.href.split('#')[1];
        $(".img_selection a[id$=_on]").removeAttr('id');
        this.id = this.className + "_on";
        jQuery('.imgs').hide();
        if (jQuery.browser.msie && jQuery.browser.version.substr(0,3) == "6.0") 
            jQuery('.imgs#' + stringref).show();
         else
            jQuery('.imgs#' + stringref).fadeIn();
        return false;
    );
    $('.img_selection a').removeAttr('id').eq(0).trigger('click');
    tabs = jQuery(".img_selection a");
    len = tabs.size();
); 

我尝试添加下面的代码，从这个网站得到了很多帮助，但无济于事..

代码：

jQuery(document).ready(function()
    jQuery(".imgs").hide().click(function()
  clearInterval(robot);
 );

HTML：

<!-- TOP IMAGE ROTATION -->
    <div id="upper_image">
        <div id="img1" class="imgs">
         <p><img src="images/top_image.jpg"    border="0" /></p>
        </div>
         <div id="img2" class="imgs">
         <p><img src="images/top_image2.jpg"    border="0" /></p>
        </div>
        <div id="img3" class="imgs">
         <p><img src="images/top_image3.jpg"    border="0" /></p>
        </div>
        </div>
<!-- / TOP IMAGE ROTATION -->
<!-- TOP IMAGE SELECTION -->
     <ul class="img_selection">
            <li><a id="img1_on" class="img1" href="#img1">1</a></li>
            <li><a class="img2" href="#img2">2</a></li>
            <li><a class="img3" href="#img3">3</a></li>
        </ul>

<!-- / TOP IMAGE SELECTION -->

【问题讨论】：

只是为了我自己的澄清，当你点击带有类 imgs 的东西时，你确定你的点击函数被调用了吗？

不，有没有一种简单的方法来测试它，以便我可以查看是否正在调用该函数？

添加警报('这里');到函数的顶部。

这在页面加载时被调用，因为自动化功能正在运行点击，所以它正在运行它并杀死机器人。我想我需要创建 2 个函数，一个标记为 click，然后一个标记为其他，因此自动化可以运行标记为其他的函数，而在 click 函数中我可以手动选择，然后它将包含 clearinterval(robot);

【参考方案1】：

没有看到 html，我无法确定，但看起来您正在将点击事件添加到图像而不是按钮。

jQuery(document).ready(function() 
    jQuery(".img_selection a").click(function() 
        clearInterval(robot); 
    );

如果这不起作用，您总是可以创建一个局部变量来暂停动画。

var pause = false;

jQuery(document).ready(function()    
    jQuery(".imgs").hide().click(function()    
        pause = true;   
    ); 

function automate()   
    if (pause) return;
    tabs.eq((index%len)).trigger('click');     
    index++;     
  

【讨论】：

我认为我的问题是自动触发是点击，所以如果我添加 ClearInterval(robot);在单击（功能）中，它将终止该过程。我也尝试了您的第二段代码，但这也停止了整个过程。我相信因为触发器运行单击，然后自动设置 pause=true，无论如何。嗯..

如果您可以添加 HTML，那么问题所在就更清楚了。

第一个代码块中的点击事件应该可以工作。您能否验证您是否尝试过。

它可以工作，但是由于自动功能，它在页面加载时运行，所以它运行 clearinterval(robot);在您手动单击按钮之前。因此，幻灯片不再起作用