Попытка постепенного появления div'ов в последовательности, используя JQuery - PullRequest
Новая
       18

Попытка постепенного появления div'ов в последовательности, используя JQuery

3 голосов
/ 16 июня 2010

Я пытаюсь выяснить, как заставить 4 изображения постепенно исчезать при загрузке страницы.

Вот мой (любительский) код:

Вот HTML: 

<div id="outercorners">

 <img id="corner1" src="images/corner1.gif" width="6" height="6" alt=""/>
 <img id="corner2" src="images/corner2.gif" width="6" height="6" alt=""/>
 <img id="corner3" src="images/corner3.gif" width="6" height="6" alt=""/>
 <img id="corner4" src="images/corner4.gif" width="6" height="6" alt=""/> 

</div><!-- end #outercorners-->

Вот JQuery: 

$(document).ready(function() {

$("#corner1").fadeIn("2000", function(){

$("#corner3").fadeIn("4000", function(){

  $("#corner2").fadeIn("6000", function(){

    $("#corner4").fadeIn("8000", function(){


    });

   });

 });

 });

Вот CSS: 

#outercorners {
position: fixed;
top:186px;
left:186px;
width:558px;
height:372px;
}

#corner1 {
position: fixed;
top:186px;
left:186px;
display: none;
}

#corner2 {
position: fixed;
top:186px;
left:744px;
display: none;
}

#corner3 {
position: fixed;
top:558px;
left:744px;
display: none;
}

#corner4 {
position: fixed;
top:558px;
left:186px;
display: none;
}

Они, кажется, просто подмигивают мне, а не исчезают в порядке, который я им приписал. Должен ли я использовать функцию queue ()? И если да, то как бы я это реализовал в этом случае?

Спасибо за любую помощь.

Ответы [ 4 ]

7 голосов
/ 23 января 2011

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

var d= 0;
$('#outercorners > img').each(function() {
    $(this).delay(d).fadeIn(1000);
    d += 1000;
});

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

Демо-версия:

http://jsfiddle.net/e5H5Y/

http://jsfiddle.net/e5H5Y/2/

Удачи

2 голосов
/ 16 июня 2010

Уберите цитаты из продолжительности или используйте одну из предустановок «медленная» или «быстрая» и т. Д. 

$("#corner1").fadeIn(2000, function(){...

OR 

$("#corner1").fadeIn("slow", function(){...

НЕ 

$("#corner1").fadeIn("2000", function(){...
1 голос
/ 16 июня 2010

Если у вас много изображений, то вы можете добавить их с помощью временной функции: 

var x=0; // The corner counter

function fading() {
  $("#corner"+(++x)).fadeIn(2000); // Fade in the current corner

  if (x==4) { // Last image to be faded in?
    clearInterval(); // Stop interval
  }
}

$(document).ready(function(){
  setInterval("fading()",1000); // Call function every second
});
0 голосов
/ 16 июня 2010

Возможно, вам понадобится обернуть ваши изображения в <div> и затемнить их.Как: 

<div id="corner1"><img src="images/corner1.gif" width="6" height="6" alt=""/></div>

Кавычки вокруг чисел не должны иметь значения.JS неявно изменит «2000» на 2000 в контексте, где ожидается число (кроме случаев использования +, который будет объединять строки).

...