как fadeIn и fadeOut All Element в div (jquery)

Question

как теги fadeIn и fadeOut img в div используют Jquery

sample:

<div class='myDivgallery' >
<img style="display: none;" src="images/1.jpg" />
<img style="display: none;" src="images/2.jpg" />
<img style="display: none;" src="images/3.jpg" />
<img style="display: none;" src="images/4.jpg" />
</div>

Мне нужно сделать слайд-галерею, но я не использую плагин.

спасибо

Answer 1

Эрфан ... если вы хотите галерею слайдов, чем: ГАЛЕРЕЯ СЛАЙДОВ

Если вы хотите то, что хотите (; D), тогда попробуйте:

EDIT Из-за ошибок, вызванных хорошо известным билетом jQuery, я придумал это демо:

ПРОСТАЯ ГАЛЕРЕЯ УПАКОВКИ

var el = $('.myDivgallery img');
var z = 1;
$(el[0]).show();
function loop(ev) {
    el.siblings().delay(1000).fadeOut(300).eq(z).fadeIn(500, function() {
        check = z != el.length-1 ? z++ : z=0;
        loop();         
    });
}
loop();

(Спасибо сообществу за то, что не приготовили мне макароны макароны al pesto для моей предыдущей демонстрации: D)
(И не спрашивайте меня, почему я назвал переменную "z", которая на самом деле делает c унций)

---

Старая версия создавала анимации при отсутствии страницы / вкладки
(я оставляю это здесь только для «плохой практики / примера».)

ERRATA исчезает галерея

$('.myDivgallery img:eq(0)').show(); // show first image on page load

var imgC = 0;   // set counter to '0'

function fade() {   // introduce our function

    var img = $('.myDivgallery img');
    var imgL = img.length;    // get the number of images

    timeout = setTimeout(function() {
        imgC++;      // count +1
        img.eq(imgC-1).fadeIn().siblings('img').fadeOut();
        if ( imgC >= imgL){ // if counter goes over our number of images...
            imgC = 0;       // reset the counter to '0'
        }
        fade();             // run our function in a loop
    }, 2000);               // timeout delay

}
fade();                     // start our function

перечитайте еще раз ... Б. А. Д. ...! плохо плохо плохо

Answer 2

$('.myDivgallery img').fadeIn('slow'); // fade in 

$('.myDivgallery img').fadeOut('slow'); // fade out