Блог

Главная - Вопросы по программированию - Анимация jQuery не работает в Safari на IOS14

Анимация jQuery не работает в Safari на IOS14

#javascript #jquery #twitter-bootstrap-3

Вопрос:

У меня есть div, который скрыт jQuery.

Div содержит анимированный индикатор выполнения начальной загрузки.

При отправке формы этот div становится видимым с помощью jQuery, а индикатор выполнения анимируется.

Код работает в:

  • Сафари на Mac
  • Chrome на Mac
  • Firefox на Mac
  • Chrome на Android
  • Chrome на IOS (я тестировал только на IOS 14)

Индикатор выполнения не удается анимировать/переместить:

  • Safari на IOS (я тестировал только на IOS 14)

Поэтому проблема, по-видимому, связана с Safari только на IOS.

 <head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>

<div id="mainWrapper"> 
  <form action="" name="apply_now_form" id="apply_now_form" method="post" autocomplete="off">
    <!-- Form Fields Here -->
    <button type="submit" id="submitButton">Submit</button>
  </form>
</div>

<div id="waitBox">
  <div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-success active" role="progressbar" aria-valuemin="5" aria-valuemax="100" style="width: 5%">
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<script>
$(document).ready(function() {
    
    $( "#waitBox" ).hide();

    $.fn.startWaitTimer = function() {

      $( "#waitBox" ).show();
      $( "#mainWrapper" ).hide();
        
      $(".progress-bar").animate({
            width: "100%"
      }, 120000);   
      
    }; 
    
    $("#submitButton").click(function(){
        $.fn.startWaitTimer();
    });
    
});   
</script>

</body>

У вас есть какие-либо идеи о том, почему индикатор выполнения не работает в Safari на IOS

Метки: