JQuery - нужна помощь, чтобы остановить анимацию по команде щелчка - PullRequest
Новая
       23

JQuery - нужна помощь, чтобы остановить анимацию по команде щелчка

1 голос
/ 19 марта 2010

С вашей помощью я смог получить 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" width="900" height="250" alt="" border="0" /></p>
        </div>
         <div id="img2" class="imgs">
         <p><img src="images/top_image2.jpg" width="900" height="250" alt="" border="0" /></p>
        </div>
        <div id="img3" class="imgs">
         <p><img src="images/top_image3.jpg" width="900" height="250" alt="" 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 -->

1 Ответ

0 голосов
/ 19 марта 2010

Не видя 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++;     
}
...