Javascript.RU

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

Код выполняется не по порядку
Здравствуйте.
У меня простой код, который должен делать картинку невидимой, менять ссылку на картинку и делать уже другую картинку видимой.
Но код сначала меняет ссылку, а потом скрывает и показывает замененную картинку. Подскажите, в чём дело...
$("nav").on("click", "div", function () {
   $(".photo img").fadeTo(400, 0);
   $(this).addClass("current").siblings().removeClass("current");
   $(".photo img").attr("src", $(this).attr("link"));
   $(".photo img").fadeTo(400, 1);
   return false;
})
Ответить с цитированием
  #2 (permalink)  
Старый 09.02.2019, 01:55
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Дело в том что интерпретатор js не будет ждать пока ваш fade выполняется, задержку для остального кода надо добавить самому.
Ответить с цитированием
  #3 (permalink)  
Старый 09.02.2019, 04:41
Интересующийся
Отправить личное сообщение для begovik Посмотреть профиль Найти все сообщения от begovik
 
Регистрация: 09.02.2019
Сообщений: 22

А что нужно дописать?
Ответить с цитированием
  #4 (permalink)  
Старый 09.02.2019, 06:11
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

$("nav").on("click", "div", function () {
	$(".photo img").fadeTo(400, 0, function () {
	$(this).addClass("current").siblings().removeClass("current");
	$(this).attr("src", $(this).attr("link"));
	$(this).fadeTo(400, 1);
	});
});
Ответить с цитированием
  #5 (permalink)  
Старый 09.02.2019, 13:16
Интересующийся
Отправить личное сообщение для begovik Посмотреть профиль Найти все сообщения от begovik
 
Регистрация: 09.02.2019
Сообщений: 22

Спасибо, j0hnik, всё работает!
Вот пока разбирался, несколько раз приходила мысль: "вот если бы к .fadeTo можно было бы дописать третий параметр...", а оно оказывается можно))
Немного переделал код, а то он атрибут от себя к себе присваивал, вот как получилось:
HTML:
<div class="container outer">
      <div class="photo"><img src="imgs/7.jpg" alt=""></div>
      <nav>
        <div class="current" link="imgs/7.jpg"><img src="imgs/7.jpg" alt=""></div>
        <div link="imgs/8.jpg"><img src="imgs/8.jpg" alt=""></div>
        <div link="imgs/9.jpg"><img src="imgs/9.jpg" alt=""></div>
      </nav>
    </div>

и JS:
$("nav").on("click", "div", function () {
   $(this).addClass("current").siblings().removeClass("current");
   $(".photo img").fadeTo(400, 0, function(){
   $(this).attr("src", $("nav .current").attr("link"));
   $(this).fadeTo(200, 1);
   });
})
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Создать код CSS+HTML JamesMorgan Общие вопросы Javascript 2 11.08.2015 12:50
Код ответа сервера и обновление iframe alexdemi911 Общие вопросы Javascript 6 10.08.2015 22:30
Помогите к js коду, написать html код Modrih Элементы интерфейса 8 16.06.2015 18:08
код нe работает в фаирфохе dadli Javascript под браузер 2 28.01.2012 21:18
live click выполняется несколько раз hara jQuery 9 09.06.2010 10:58