Проблема с отображением / скрытием div - PullRequest
Новая
       37

Проблема с отображением / скрытием div

6 голосов
/ 20 июля 2011

Я пытаюсь показать несколько случайных изображений в div. Мой HTML-код выглядит так: 

<div class="sponsors">
<div id="sponsorsContent">
    <div class="spacer"></div>
    <div class="sponsorSlide" id="imgageSlide_1">
        <img alt="" src="<?php echo $this->baseUrl(); ?>/img/Sponsors/img_1.jpg" /><br />
        <span class="thumbnail-text">Image Text</span>
    </div>
    <div class="spacer"></div>
    <div class="sponsorSlide" id="imgageSlide_2">
        <img alt="" src="<?php echo $this->baseUrl(); ?>/img/Sponsors/img_2.jpg" /><br />
        <span class="thumbnail-text">Image Text</span>
    </div> ... </div></div>

Я пытаюсь сначала перетасовать divs "спонсорство", а затем выбрать 7 из них случайным образом. Я хочу показать это с помощью fadeIn и fadeOut. Вообще, я пытаюсь этот код: 

$('#sponsorsContent').addClass('horizontal');
$('#sponsorsContent div').addClass('hidden').removeClass('visible');
$('#sponsorsContent .sponsorSlide').rand(7).removeClass('hidden');
setInterval(function(){
    $('#sponsorsContent').fadeOut(500);
    $('#sponsorsContent .sponsorSlide').delay(500).addClass('hidden').removeClass('visible').shuffle();
    $('#sponsorsContent .sponsorSlide').rand(7).removeClass('hidden').addClass('visible');                  
    $('#sponsorsContent').fadeIn(1500);
}, 5000);

Основная проблема в том, что когда код запускается, как раз перед тем, как div исчезает, вы можете видеть, что изображения меняются! Но я хочу рандомизировать их, когда они не видны! Я использовал разные способы:

  • Задержка в разных положениях и разных частях
  • Используйте addClass ("bla", 500)!
  • Show (500) / Hide (500)
  • fadeIn / fadeOut "спонсорский слайд"

К вашему сведению, я пытаюсь получить эту концепцию:

1 - показаны некоторые случайные изображения 2 - исчезают 3 - случайные изображения 4- Выберите 7 случайных дел 5- исчезать 6- го 2

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

ps: работает без выцветаний! Но мне нужно их постепенно исчезать.

1 Ответ

5 голосов
/ 20 июля 2011

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

$('#image_div').fadeOut(500, function() { //first fade out!
    $('#image_div img').attr('src', 'image.jpg'); //only then change the picture
    $('#image_div').fadeIn(500);   //and fade in
});

То, что входит в function(){//code}, произойдет ТОЛЬКО после завершения fadeOut().

...