fadeout() изображения с задержкой с помощью jQuery

Question

У меня есть около 10 изображений, которые я хочу погасить, но задержка fadeout показывает, что каждое изображение показано четко.

for(i=1;i<=24;i++) { 
$('.stretch').fadeOut(5000).attr('src','images/hello'+i+'.jpg'); 
    } 

Я хочу использовать jQuery.

Благодаря Жан

Answer 1

Попробуйте этот код:

for(i=1;i<=24;i++) { 
     $('.stretch').fadeOut(function() { 
      $(this).load(function() { $(this).fadeIn(); }); 
      $(this).attr('src','images/hello'+i+'.jpg'); 
     }); 
} 

Answer 2

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

delayTime = 0; 
jQuery('.stretch').each(function() { 
    jQuery(this).delay(delayTime).fadeOut(5000); 
    delayTime = delayTime + 5000; 
}); 

Итак, опять же, это непроверенный фрагмент кода, но концепция проста - вы в основном говорят, что я хочу исчезнуть сначала один сразу, затем затухают второй по 5000 позже, затем третий после 5000 и т. д. и т. д.

Это имеет смысл?

Answer 3

Внимание: attr('src', 'blah') будет SET СРК TO-бла ... Я не думаю, что это то, что вы хотите здесь несколько альтернатив:

Почему не вы все эти изображения разделяют имя класса, то вы удаляете необходимость цикла for, и вы можете просто исчезать все изображения, используя имя класса?

$('.chosenImage', '.stretch').fadeOut(5000); 

выше эквивалентно использованию CSS

$('.stretch .chosenImage').fadeOut(5000); 

Просто будьте осторожны, что вы положили родителю первый в версии CSS, а ребенок первый в разделенных запятой JQuery синтаксиса версии.

Вышеупомянутое будет работать со всеми предметами класса chosenImage, которые являются дочерними элементами элемента класса stretch.

---

Вы можете использовать регулярное выражение: Это позволит получить все helloXX, где XX является один или два значное число ... Вы можете уточнить регулярное выражение только подобрать 1 - 24, если вы хотите.

$('img', '.stretch').filter(function(){ 
    return $(this).attr('src').match(/images\/hello[0-9]{1,2}.jpg/); 
}).fadeOut(5000); 

Этот код берет все ГИМ в классе .stretch и фильтрует их с помощью регулярных выражений на каждый атрибут Src ГИМ.

---

Чтобы их исчезать один за другим, вы бы просто цель каждого изображения по одному и поставить все большую задержку на них ... что-то вроде этого:

var delayIt = -1000; 
$('img', '.stretch').each(function(){     
    delayIt += 1000; 
    $(this).delay(delayIt).fadeOut(5000); 
}); 

Это будет затухать каждое изображение в классе растягиваются один за другим.

---

Некоторые соответствующие ссылки JQuery:

attr()

delay()

each()

fadeOut()