Нужно показать GIF при нажатии кнопки

Question

Я работаю в Unbounce. Я хочу, чтобы изображение вертушки было скрыто, но показывать, когда пользователь нажимает кнопку. У меня есть кнопка с надписью #lp-pom-button-279 и изображение с надписью #lp-pom-image-288

Я пытался использовать JS и CSS, чтобы скрыть / показать gif, но по какой-то причине я вижу его только скрытым или полностью показанным - он не загружается при нажатии.

<script>
  $('#lp-pom-button-279').click(function() {
  $('#lp-pom-image-288').show(); //<----here
  $.ajax({
    ....
    success: function(result) {
      $('#spinner').hide();  //<--- hide again
    }
  }
</script>

<style>
  #lp-pom-image-288 {
    display: none;
  }
</style>

Answer 1

Вам не нужно использовать ajax, чтобы просто скрыть изображение.Сначала нужно скрыть картинку и, нажав кнопку, показать ее.

Эту проблему можно решить с помощью функции jQuery hide () / show () или измените стиль с помощью функции jQuery css () .

с помощью hide () и show ()

$('#picture').hide(); // hide at beginning

$('#button').click(function(){
  $('#picture').show(); // show on button click
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">Show picture</button>
<br />
<img id="picture" src="https://dummyimage.com/600x400/000/fff"/>

с помощью css ()

$('#picture').css("display", "none"); // hide at beginning

$('#button').click(function(){
  $('#picture').css("display", "block"); // show button on click
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">Show picture</button>
<br />
<img id="picture" src="https://dummyimage.com/600x400/000/fff"/>

Answer 2

Неверное значение id, которое вы используете в функции обратного вызова success:

$('#lp-pom-button-279').click(function() {
  $('#lp-pom-image-288').show(); // <- Show spinner here
  $.ajax({
    url: 'https://reqres.in/api/users',
    success: function(result) {
      $('#lp-pom-image-288').hide(); // <- Hide spinner here
    }
  });
});

#lp-pom-image-288 {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="lp-pom-button-279">Button</button>
<div id="lp-pom-image-288">Spinner</div>

Answer 3

Вы прячете спиннер с неверным идентификатором.

success:function(result){
       $('#lp-pom-image-288').hide();  //<--- hide again
   }