Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.10.2016, 16:00
Новичок на форуме
Отправить личное сообщение для nick032 Посмотреть профиль Найти все сообщения от nick032
 
Регистрация: 12.10.2016
Сообщений: 4

Как работают dadeIn и fadeOut
Объясните пожалуйста, почему в примере, 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>
Ответить с цитированием
  #2 (permalink)  
Старый 12.10.2016, 16:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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();
    });
    }

  });
});
Ответить с цитированием
  #3 (permalink)  
Старый 13.10.2016, 08:24
Новичок на форуме
Отправить личное сообщение для nick032 Посмотреть профиль Найти все сообщения от nick032
 
Регистрация: 12.10.2016
Сообщений: 4

Спасибо большое!
Подскажите пожалуйста, как в 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(Ошибка);
			}
		});
	});
Ответить с цитированием
  #4 (permalink)  
Старый 13.10.2016, 08:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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('Ошибка');
      }
    });
  });

});
Ответить с цитированием
  #5 (permalink)  
Старый 13.10.2016, 09:55
Новичок на форуме
Отправить личное сообщение для nick032 Посмотреть профиль Найти все сообщения от nick032
 
Регистрация: 12.10.2016
Сообщений: 4

рони,
Спасибо большое, все работает. Можете сказать почему в первом варианте такая последовательность выполнения функций?
Ответить с цитированием
  #6 (permalink)  
Старый 13.10.2016, 10:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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

Последний раз редактировалось рони, 13.10.2016 в 10:07.
Ответить с цитированием
  #7 (permalink)  
Старый 13.10.2016, 10:05
Новичок на форуме
Отправить личное сообщение для nick032 Посмотреть профиль Найти все сообщения от nick032
 
Регистрация: 12.10.2016
Сообщений: 4

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно реализовать такой функционал? Julian Общие вопросы Javascript 3 16.01.2015 12:34
Как сделать такую страницу mortido Элементы интерфейса 11 02.10.2014 07:20
Как отработать функцию после fadeOut? free_style jQuery 11 26.08.2014 17:04
Мотоциклисты есть? l-liava-l Оффтопик 13 04.07.2014 13:35
Решение проблемы кодировок для AJAX и PHP без iconv (cp1251 в AJAX) Serge Ageyev AJAX и COMET 10 24.04.2013 20:48