jQuery случайно исчезают в изображениях - PullRequest
Новая
       20

jQuery случайно исчезают в изображениях

6 голосов
/ 18 июня 2009

У меня есть контейнер с большим количеством маленьких изображений. 

<div id="container">
   <img src="1.jpg" />
   <img src="2.jpg" />
   <img src="3.jpg" />
   ...
   <img src="100.jpg" />
</div>

Я установил непрозрачность на 0. (не скрывая) Затем я хочу показать (fadeIn) случайное изображение через полсекунды. например 5, 1, 55 ...

Любые предложения, большое спасибо

Ответы [ 5 ]

4 голосов
/ 18 июня 2009

попробуйте 

<script type="text/javascript">

//generate random number
var randomnumber=Math.floor(Math.random()*$("#container").children().length);
$(function() {
    //hide all the images (if not already done)
    $("#container > img").hide();

    //set timeout for image to appear (set at 500ms)
    setTimeout(function(){
       //fade in the random index of the image collection
       $("#container > img:eq(" + randomnumber + ")").fadeIn();
    }, 500);       
});
</script>
1 голос
/ 16 февраля 2012

Если вы хотите добавить все изображения вместо этого, нет необходимости использовать все случайные вещи, просто прокрутить и задержать случайное число от 500 мс до 1 секунды. Вы должны поставить функцию скрытия в любом случае. Или с непрозрачностью используйте animate css. 

$('#container img').each(function(index) {

   $(this).delay( Math.random()*500+500 ).fadeIn();

});

вы не найдете ничего проще, и с тем же эффектом

1 голос
/ 18 июня 2009

Неясно (для меня), хотите ли вы начать исчезать через полсекунды или исчезать через полсекунды. Тем не менее, переход с исчезновением в через полсекунды Если вы хотите сделать это иначе, просто проигнорируйте вещи с помощью setTimeout ()

Общий обзор того, что вы хотите сделать:
Создайте функцию при загрузке страницы, которая вызывается через полсекунды (setTimeout)
Эта функция должна генерировать случайное число, где min равно 0, а max - как число дочерних элементов элемента #container минус 1
Исчезните дочерний элемент #container с индексом, предоставленным случайным числом.

Код Pusdo (Я давно ничего не делал с jQuery. Или, если на то пошло, с Javascript) 

function onDocumentReady(){
    setTimeout(500, "fadeInRandom()");
}

function fadeInRandom(){    
    var numElements = $("#container").children().length;
    var randomElem = Math.random() * (numElements-1);
    $("#container").children()[randomElem].fadeIn();
}
1 голос
/ 18 июня 2009

присваивает идентификатор каждому изображению с помощью шаблона номера, а затем затухает изображение со случайно сгенерированным идентификатором, используя math.random из javascript 

function getImage(minim,maxim) {
    return "img" + Math.round(Math.random()*(maxim-minim)+minim);
}
0 голосов
/ 18 июня 2009

Я бы использовал случайное число, сгенерированное для создания атрибута src изображения и соответственно построил селектор jQuery: 

setInterval ( showRandomImage, 500 );

function showRandomImage()
{
    var randNo = Math.floor(Math.random() * 101);
    $("#container > img[src=" + randNo + "'.jpg']")
                   .animate({opacity: 0}, 500).fadeIn('slow');
}
...