Помогите с замиранием в списке при загрузке страницы - PullRequest
Новая
       27

Помогите с замиранием в списке при загрузке страницы

0 голосов
/ 19 июня 2011

Итак, я пытался добавить в список 4 ссылки при загрузке страницы, по вертикали, одну за другой, с задержкой между ними: 

$(document).ready(function() {
     function fadeItem() {
          $('ul li:hidden:first').delay(500).fadeIn(fadeItem);

ссылки в списке в данный момент не выполняются вышеуказанным скриптом при загрузке страницы.

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

или

У меня уже запущен скрипт, включающий классы li, которые я пытаюсь последовательно затухать, вызывая конфликт между двумя скриптами.

Сценарий jQuery, который я уже запускаю без проблем: 

<script type>
$(document).ready(function() {
    $('#thumb ul li a').hover(
            function() {
                var currentBigImage = $('#gallery img').attr('src');
                var newBigImage = $(this).attr('src');
                var currentThumbSrc = $(this).attr('rel');
                switchImage(newBigImage, currentBigImage, currentThumbSrc);
            },
            function() {}
        );
    function switchImage(imageHref, currentBigImage, currentThumbSrc) {
            var theBigImage = $('#gallery img');
            if (imageHref != currentBigImage) {
                theBigImage.fadeOut(250, function(){
                    theBigImage.attr('src', imageHref).fadeIn(250);
                    var newImageDesc = $("#thumb ul li a img[src='"+currentThumbSrc+"']").attr('alt');
                    $('p#desc').empty().html(newImageDesc);
                });
            }
        }
});
</script>

Я все еще привыкаю к ​​jQuery, поэтому рассматриваемый скрипт может быть совершенно неверным. Из того, что я понимаю, $(document).ready(function() { сначала загружает элементы, затем выполняет функцию (и). Если при загрузке страницы есть лучший способ замирания классов li, любая помощь будет принята с благодарностью, спасибо.

Ответы [ 3 ]

2 голосов
/ 19 июня 2011

Вы определили fadeItem() в этом документе готовым, но так как вы не вставили все это, я не уверен, что вы на самом деле звоните так? Вызова fadeItem() из готового документа должно быть достаточно, чтобы запустить процесс.

Может быть проще написать: 

// $(fn) is an alias for $(document).ready(fn)
$(function fadeItem() {
   $("ul li:hidden:first").delay(500).fadeIn(fadeItem);
});

Таким образом, функция вызывается в готовом документе и может вызывать сама себя.

Кроме того, учитывая ваш ответ в некоторых комментариях - селектор :hidden найдет только элементы с display: none, шириной и высотой 0 (и ввод скрыт, но это не распространяется на ul li.)

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

0 голосов
/ 19 июня 2011

Из комментариев кажется, что это просто недоразумение: .fadeIn() не повлияет на уже 100% видимый элемент , вам нужно .hide() элемент первый, что-то вроде этого: 

$(document).ready(function() {
   $('ul li').hide();
   function fadeItem() {
      $('ul li:hidden:first').delay(500).fadeIn(fadeItem);

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

0 голосов
/ 19 июня 2011

Если вы хотите, чтобы ваша функция fadeItem () выполнялась в готовом документе, вы также должны выполнить ее немедленно. Вы пробовали это (почему вы передавали функцию fadeIitem в качестве параметра для fadeIn ()? Первым параметром должна быть продолжительность затухания): 

 function fadeItem() {
      $('ul li:hidden:first').delay(500).fadeIn(400);
 }();//execute the function

В противном случае не помещайте затухание в функцию. 

$(document).ready(function() {
          $('ul li:hidden:first').delay(500).fadeIn(400);
...