Как работают dadeIn и fadeOut

[nick032]

Объясните пожалуйста, почему в примере, loader.fadeOut(300, funct....) не скрывет картинку(loader)?

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>FadeUtIn</title>
	<style>
		.im-hidden {
			display: none;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="block">
			<button class="calc">Расчитать</button>
			<span class="im-hidden">
				<img src="loader.gif" alt="">
			</span>
		</div>
	</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
	$('.calc').click(function(e){
		e.preventDefault();
		var $this = $(this),
			parent = $this.parent(),
			loader = $this.next();

		$this.fadeOut(300, function(){
			loader.fadeIn()
		})

		loader.fadeOut(300, function() {
			$this.fadeIn();
		});
	});
});
	
</script>
</body>
</html>

[рони]

nick032,

$(document).ready(function(){
  $('.calc').click(function(e){
    e.preventDefault();
    var $this = $(this),
      parent = $this.parent(),
      loader = $this.next();

    $this.fadeOut(300, function(){
      loader.fadeIn(f)
    })
    function f()
    {
    loader.fadeOut(300, function() {
      $this.fadeIn();
    });
    }

  });
});

[nick032]

Спасибо большое!
Подскажите пожалуйста, как в ajax запросе выполнить скрытие лоэдера при успешно выполнении запроса? В примере, лоэдер не скрывается, не пойму в каком порядке функции выполняются. Экспериментально выявил что первым выполняется list.html(res);, а затем loader.fadeIn(300); что приводит к показу лоэдера.

$('#favorites-del-all').click(function(e){
		//e.preventDefault();
		//if( !confirm("Подтвердите удаление") ) return;

		var $this = $(this),
			parent = $this.parent(),
			loader = $this.next(),
			list = parent.prev();
		
		$.ajax({
			type: 'POST',
			url: ajaxurl,
			data: {
				security: Favorites.nonce,
				action: 'favorites_dell_all',
			},
			beforeSend: function(){
				$this.fadeOut(300, function(){
					loader.fadeIn(300);
				})
				
			},
			success: function(res){
				loader.fadeOut(300, function(){
					list.html(res);
				});
			},			
			error: function(){
				alert(Ошибка);
			}
		});
	});

[рони]

nick032,
вариант...

$(function() {
$('#favorites-del-all').click(function(e){
    //e.preventDefault();
    //if( !confirm("Подтвердите удаление") ) return;

    var $this = $(this),
      parent = $this.parent(),
      loader = $this.next(),
      list = parent.prev().hide();

    $.ajax({
      type: 'POST',
      url: ajaxurl,
      data: {
        security: Favorites.nonce,
        action: 'favorites_dell_all',
      },
      beforeSend: function(){
        $this.fadeOut(300);
        loader.fadeIn(300);
      },
      success: function(res){
        loader.stop().fadeOut(300, function(){
          list.html(res).show();
        });
      },
      error: function(){
        alert('Ошибка');
      }
    });
  });

});

[nick032]

рони,
Спасибо большое, все работает. Можете сказать почему в первом варианте такая последовательность выполнения функций?

[рони]

nick032,
потому что нет stop и скрытие накладывается на открытие(неизвестно кто победит), либо использовать callback выстраивая очередь анимаций(если это возможно), либо останавливать предыдущую анимацию перед запуском новой.

[nick032]

рони,
Все понял, спасибо большое за помощь!