Цикл Animate forever работает в Chrome, но не в IE - PullRequest
0 голосов
/ 11 марта 2012

У меня есть следующий фрагмент кода, который бесконечно циклически перебирает анимационную функцию jQuery.Он отлично работает на Chrome, но не работает после первого вызова animate в IE.Мои вопросы:

  • Как я могу заставить это работать в IE (9)?
  • Как я могу добавить задержку после первого цикла?Я хочу, чтобы между последовательными импульсами была задержка.

    #container {
    position : relative;
    width    : 500px;
    height   : 200px;
    overflow : hidden;
    opacity: 1;
    }
    

.

 #container > img {
    position : absolute;
    top      : 0;
    left     : 0;
    }

.

$(window).load(function(){
$(function () {
    var $image = $('#container').children('img');
    function animate_img() {
        if ($image.css('opacity') == '1') {
            $image.animate({opacity: '0.4'}, 2000, function () {
                animate_img();
            });
        } else {console.log('2');
            $image.animate({opacity: '1'}, 2000, function () {
                animate_img();
            });
        }
    }
    animate_img();
});

});

.

<div id="container">
  <img src="blah.jpg" width="500" height="375" />
</div>

Ответы [ 2 ]

1 голос
/ 11 марта 2012

Удалите оператор console.log() из ветви else, и он должен работать в IE - IE не нравится console.log(), если консоль фактически не открыта, в то время как (большинство) других браузеров либо игнорируют его, либо регистрируются в как вы можете увидеть, если вы откроете консоль позже. (У меня нет IE9, но это все, что нужно, чтобы исправить это, когда я тестировал его в IE8.)

Также не имеет смысла иметь обработчик, готовый к документам, внутри обработчика $(window).load(), поэтому вы должны удалить один или другой.

Чтобы добавить задержку между последовательными импульсами, просто используйте функцию .delay() jQuery перед вызовом .animate() в ветви else, например:

$(function () {
    var $image = $('#container').children('img');
    function animate_img() {
        if ($image.css('opacity') == '1') {
            $image.animate({opacity: '0.4'}, 2000, function () {
                animate_img();
            });
        } else { // console.log removed from this spot
            $image.delay(500).animate({opacity: '1'}, 2000, function () {
                animate_img();
            });
        }
    }
    animate_img();
});

P.S. Учитывая, что анонимные функции, которые вы получили для полных обратных вызовов .animate(), ничего не делают, кроме вызова animate_img(), вы можете удалить анонимные функции и просто передать animate_img напрямую. Таким образом, вы можете сделать функцию намного короче, если хотите:

$(function () {
  var $image = $('#container').children('img');
  function animate_img() {
    var fade = $image.css('opacity') == '1';
    $image.delay(fade?1:500).animate({opacity:fade?'0.4':'1'},2000,animate_img);
  }
  animate_img();
});
0 голосов
/ 11 марта 2012

После удаленного обсуждения вопроса о том, следует ли использовать setTimeout() или setInterval(), другое решение, использующее setInterval()

$(function () {
 var $image = $('#container').children('img');
 function animate_img() {
  if ($image.css('opacity') == 1) {
   $image.animate({opacity: 0.4},{ queue:false, duration:2000});
  } else {
   $image.animate({opacity: 1},{ queue:false, duration:2000});
  }
 }
 setInterval(animate_img, 4000);
});

Обратите внимание, что интервал времени должен иметь минимум 4000 мс, что является суммой времени анимации (2000 мс каждый) назад и вперед. Если интервал меньше этого, анимация не будет завершена.

Я настаивал в предыдущем (удаленном) обсуждении, что правильный синтаксис для setInterval должен быть setInterval("animate_img()", 4000) ... мой плохой, потому что я упустил, что setInterval был внутри функции ... поэтому функция animate_img должен называться указателем, а не строкой.

Преимущество этого решения (я думаю) заключается в меньшем количестве строк кода, а также в том, что нам не нужно вызывать функцию animate_img() 3 раза в цикле и внутри себя.

Это должно нормально работать как в Chrome, так и в IE.

...