Блог

Главная - Вопросы по программированию - javascript выходит из цикла while при повторном вызове функции

javascript выходит из цикла while при повторном вызове функции

#javascript #jquery #animation

#javascript #jquery #Анимация

Вопрос:

Итак, я работал над анимацией предупреждений javascript, 

 function addalert(text){
            if(alertid >= 100){
                alertid = 0;
            }

            document.body.innerHTML  = ("<div id=""   alertid   "" "   "class="alert">"   text   "</div>");
            var top = parseInt($("#" alertid).css('top'));
            while($("#" alertid).css('top') > 0){
                setInterval($("#" alertid).css({"top": $("#" alertid).css("top") - 1,"opacity":$("#" alertid).css("opacity") -0.1}), 100);

            }
            $("#" alertid).css({"top":"0","opacity":"0"});
            alertid  ;
            return;
        }

проблема в том, что когда вы вызываете эту функцию, когда функция уже вызвана и анимация продолжается, кажется, что она просто выходит из анимации.

Редактировать:

я пытался использовать jquery animate, это не сработало

 function addalert(text){
            if(alertid >= 100){
                alertid = 0;
            }

            document.body.innerHTML  = ("<div id=""   alertid   "" "   "class="alert">"   text   "</div>");

            $("#" alertid).animate({"top":"0px","opacity":"0"}, {easing: "linear", duration: 2000, complete: function(){$("#" alertid).remove()} });


            /*$("#" alertid).css({"top":"0","opacity":"0"});*/

            alertid  ;
        }

Комментарии:

1. почему вы не используете $('#' alertid).animate(...) ?

2. Вам лучше переосмыслить и сделать это другим (лучшим) способом. Попробуйте использовать больше CSS.

3. Я полагаю, что ваше понимание setInterval … неверно. setInterval не «приостанавливает» ваш код.

4. Пожалуйста, добавьте немного HTML и CSS, чтобы мы могли воспроизвести ваш случай.

Ответ №1:

Вот демонстрационное использование animate() . Обратите внимание, что в коде также должен быть правильно установлен CSS, иначе он не будет работать. Точнее div , для анимируемого должен быть position установлен его стиль.

Чтобы прервать текущую анимацию, когда должна начаться новая, используйте .finish() . Вот рабочий фрагмент, который показывает два предупреждения, где второе прерывает первое, когда оно выполняется только на полпути:

 var alertid = 0;
function addalert(text){
    if(alertid >= 100){
        alertid = 0;
    }
    // Finish any ongoing alert animation
    $('.alert:last()').finish();
    // Add the div in the jQuery way:
    $("<div>").attr('id', alertid).addClass('alert').text(text)
        .appendTo(document.body)
        .animate({
            top: "0px",
            opacity: "0"
         }, {
            easing: "linear", 
            duration: 2000, 
            complete: function(){
                // You can use `this` here:
                $(this).remove();
            } 
        });
    alertid  ;
}

// Demo
$(function() {
    addalert('first alert');
    setTimeout(function () {
        addalert('second alert interrupted the first');
    }, 1000);
});  
 .alert {
    position: absolute;
    top: 100px;
    left: 0px;
    background: orange;
}  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Ответ №2:

Я бы предложил использовать библиотеку анимации вместо создания подобных собственных анимаций. Например, есть velocity js, который работает действительно хорошо.

Я не уверен, хорошо ли я понял вашу анимацию, но я думаю, что это то, что он тоже сделал:

Для части stop я создал небольшую пустышку, которую нужно улучшить, но вы поняли идею. Очевидно, что элемент также должен быть удален и так далее…

 var animation;

$('#start').on('click', function() {
  var el = document.createElement('div');
  el.style.position = 'absolute';
  el.style.bottom = '10px';
  el.style.right = '10px';
  el.appendChild(document.createTextNode('Alert text'));
  el.style.backgroundColor = 'red';
  document.body.appendChild(el);
  animation = $(el).velocity({
    translateY: document.body.scrollHeight * -1   'px',
    opacity: 0
  }, {
    duration: 4000
  });

});

$('#stop').on('click', function() {
  $(animation).velocity('stop');
  
});  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.3.1/velocity.min.js"></script>
<button id="start">
  Start animation
</button>

<button id="stop">Stop</button>