jQuery, как делать что-то одновременно

Я не могу понять, как сделать следующее в хорошем смысле.

Мне нужно убрать изображение. Измените источник изображения. Затем закрасьте его обратно.

Но проблема в том, что fadeOut и fadeIn должны быть одновременно. Конечно, то, как я это делаю сейчас (прочитайте пару строк ниже), изменит источник во время затухания, что очень заметно.

$('#lightboxImage').fadeOut('slow');
$('#lightboxImage').attr('src', 'an imagesource');
$('#lightboxImage').fadeIn('fast');

Когда я просто запускаю это. он изменяет изображение перед исчезновением.

Когда я добавляю две вторые строки в функцию обратного вызова fadeOut. Небольшой период белого экрана появляется перед тем, как появляется новое изображение.

Надеюсь, кто-нибудь поможет мне разобраться в этом. :)


image jquery fadein fadeout
person Weszzz7    schedule 25.10.2012    source источник

Ответы (4)


arrow_upward
5
arrow_downward

Вы должны использовать функцию обратного вызова fadeOut. Смотри ниже,

$('#lightboxImage').fadeOut('slow', function () {
   // Callback function that will be called after fadeOut
   $('#lightboxImage').attr('src', 'an imagesource').fadeIn('fast');
});

Ниже приведена документация jQuery,

.fadeOut( [duration] [, easing] [, callback] )

  • durationA строка или число, определяющее, как долго будет работать анимация.
  • easingA строка, указывающая, какую функцию плавности использовать для перехода.
  • callbackФункция для вызова после завершения анимации.
person Selvakumar Arumugam    schedule 25.10.2012
comment
Возможно, вы захотите установить обратный вызов onLoad для изображения с частью FadeIn перед настройкой src. - person Per Salbark; 25.10.2012
comment
@PerSalbark Это создает собственный набор проблем, поскольку jQuery не может должным образом обнаружить загрузку кэшированных изображений без какой-либо манипуляции со стороны разработчика. Лучше просто предварительно загрузить изображение с документом. - person Blazemonger; 25.10.2012
comment
Это не так? У меня никогда не было с этим проблем. Можно ссылку на того, у кого есть? - person Per Salbark; 25.10.2012
comment
@PerSalbark Конечно. - person Blazemonger; 25.10.2012
comment
@Blazemonger: Хорошо, это для тех случаев, когда я уже установил src. В данном случае он устанавливает это как часть функции, поэтому я думаю, что с ним все будет в порядке. - person Per Salbark; 25.10.2012

arrow_upward
3
arrow_downward

Используйте функции обратного вызова.

$('#lightboxImage').fadeOut('fast', function() {
    $('#lightboxImage').attr('src', 'an imagesource').fadeIn('fast');
});

На странице википедии хорошо описаны функции обратного вызова.

В компьютерном программировании обратный вызов — это ссылка на исполняемый код или фрагмент исполняемого кода, который передается в качестве аргумента другому коду. Это позволяет программному уровню более низкого уровня вызывать подпрограмму (или функцию), определенную на уровне более высокого уровня.

person abhshkdz    schedule 25.10.2012
comment
Хотя в каком-то смысле это то, чего я хочу, все же есть небольшой момент, когда экран пуст. Мне нужно сделать почти то же самое, что и на этой странице: fabriq.nl /moon-thinsulate-jas-navy-pf-12106.html Если щелкнуть основное изображение, появится лайтбокс. Затем нажмите следующую кнопку. Переход, который вы видите здесь, это то, что я ищу. - person Weszzz7; 25.10.2012
comment
Попробуйте изменить время затухания с slow на fast и посмотрите, подходит ли вам это. :) - person abhshkdz; 25.10.2012

arrow_upward
1
arrow_downward

Я не знаю, нужны ли вам ответы, которые дают люди.

Я думаю, вы хотите, чтобы первое изображение «перетекало» во второе изображение.

В этом случае вам нужно будет иметь два изображения, одно за другим.

Тот, что позади, должен быть display: none в css.

Затем вы можете сделать:

$('img#image1').fadeOut();
$('img#image2').fadeIn();

И первое изображение должно плавно переходить во второе.

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

например http://jsfiddle.net/vre4M/

Это также позволяет вам переходить назад и вперед: http://jsfiddle.net/vre4M/1/

person Thomas Clayson    schedule 25.10.2012
comment
Ах, да, это именно то, что мне нужно сделать. Проблема в том, что код довольно сложный (я новичок как в jQuery, так и в magento). Спасибо за ваш пример, я посмотрю, как далеко я продвинусь с этим :) - person Weszzz7; 25.10.2012

arrow_upward
0
arrow_downward

Постановка их в очередь поможет:

$('#lightboxImage').fadeOut('slow', function () {
  $(this).attr('src', 'an imagesource').fadeIn('fast');
  });
});

Используйте $(this), чтобы не находить его снова и снова.

РЕДАКТИРОВАТЬ: Обновлен мой ответ, потому что функция attr не имеет обратного вызова. Спасибо, парни.

person Pulkit Mittal    schedule 25.10.2012
comment
Приятно знать, что здесь произошло не так, из-за чего мой ответ был отклонен. Это помогает людям. - person Pulkit Mittal; 25.10.2012
comment
Я думаю, что вас, вероятно, заминусовали, потому что вы только что скопировали другие ответы и просто изменили $('#lightboxImage') на $(this). На самом деле это должен был быть комментарий к другим ответам, а не отдельный ответ, который не дает ничего отличного от любого другого ответа. Это просто потраченное впустую пространство. - person Thomas Clayson; 25.10.2012
comment
@ThomasClayson, он на самом деле не скопировал ни одного ответа, но он ошибочно попытался определить обратный вызов для attr, что, я думаю, не разрешено. Итак, @pulkit, я думаю, вас заминусовали за неправильный ответ, attr не имеет обратного вызова. - person bool.dev; 25.10.2012