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

Question

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

0

Я создаю функцию на веб-сайте, которая показывает нового "признанного советника" каждые 5 секунд или около того. Если бы он просто показывал один pic, я бы просто использовал show() & hide(). К сожалению, мне нужно переместить изображение и затем отобразить div с текстом подписи, а затем через 5 секунд удалите подпись и изображение. К счастью, я успешно написал функцию "показать" и функцию "скрыть", и я даже заставил ее подождать указанные 5 секунд, прежде чем скрыться. Моя проблема в том, что я не могу понять, как перейти к следующему "признанному советнику" и запустить функции show-wait-hide. Любые предложения были бы весьма неприятными. Здесь мой код для справки:

CSS:

article[role=main] aside li {/*Set up the basic stying & hide them all*/
   list-style: none;
   margin: 0px;
   padding: 0px;
   display: none;
  }

article[role=main] aside li.show { /*Only show one at a time*/
display: block;
}

HTML:

<ul id="items">
<li class="show">
    <a href="#">
        <div class="caption">
          <h5>Featured Counselor</h5>
            <h3>Courtney Humphrey</h3>
            <h4>Registered Dietician</h4>
        </div><!-- End #caption -->
        <div class="featured-counselor">
            <img src="img/featured_counselor_placeholder.jpg" />
        </div><!-- End #featured-counselor -->
    </a>
</li>
<li>
    <a href="#">
        <div class="caption">
          <h5>Featured Counselor</h5>
            <h3>Test Two Title</h3>
            <h4>Registered Dietician</h4>
        </div><!-- End #caption -->
        <div class="featured-counselor">
            <img src="img/featured_counselor_placeholder.jpg" />
        </div><!-- End #featured-counselor -->
    </a>
</li>

JQuery:

featuredCounselorCarousel(); //Call the function that runs the show

function featuredCounselorCarousel() {
    showCurrentCounselor(); //Show the Counselor First
    setTimeout(function() { //Add a timer (Show for 5 seconds)        
    hideCurrentCounselor() //After 5 seconds, hide the current counselor                    
    }, 5000)
}// End featuredCounselorCarousel


function showCurrentCounselor() { //This is the Function that shows the Counselor       
    $('article[role=main] aside ul li.show #featured-counselor').delay( 100 ).animate({"left": "0px"}, 900, 'easeInOutQuint');//Slide out
    $('article[role=main] aside ul li.show #caption').delay( 1000 ).fadeIn(400);//Display the Caption
}// End showCurrentCounselor 


function hideCurrentCounselor() { //This is the Function that hides the Counselor       
    $('article[role=main] aside ul li.show #featured-counselor').delay( 100 ).animate({"left": "-230px"}, 900, 'easeInOutQuint');//Slide Back In
    $('article[role=main] aside ul li.show #caption').delay( 500 ).fadeOut(400);//Remove the Caption
}// End hideCurrentCounselor

TripsLeft 21 сен. 2013, в 15:31

Источник

Теги:

jquery

html

css

loops

2 ответа

0

Используйте функцию $(#items li).each внутри функции featuredCounselorCarousel и весь ваш код попадает внутрь каждого.

Вы сможете получить доступ к текущему li и можете изменить ваш селектор в функции show и hide соответственно, чтобы быть относительно элемента li.

Abhishek Punj 21 сен. 2013, в 12:37

0

Я пытаюсь сделать ваше предложение, но не могу найти таймер в нужном месте. Это продолжает увольнять их всех одновременно
TripsLeft 21 сен. 2013, в 14:26

Ещё вопросы

Я пытаюсь сделать ваше предложение, но не могу найти таймер в нужном месте. Это продолжает увольнять их всех одновременно

Abhishek Punj · Accepted Answer · 2013-09-21T12-02-00.000Z

 function triggerCarousal(){  setTimeout(function() { //Add a timer (Show for 5 seconds)        
     featuredCounselorCarousel();                    
    }, 5000) }

function featuredCounselorCarousel() {
    hideCurrentCounselor();
showCurrentCounselor(); //Show the Counselor First

}// End featuredCounselorCarousel


function showCurrentCounselor() { //This is the Function that shows the Counselor       
    $('article[role=main] aside ul li.show #featured-counselor').delay( 100 ).animate({"left": "0px"}, 900, 'easeInOutQuint');//Slide out
    $('article[role=main] aside ul li.show #caption').delay( 1000 ).fadeIn(400);//Display the Caption
}// End showCurrentCounselor 


function hideCurrentCounselor() { //This is the Function that hides the Counselor       
    $('article[role=main] aside ul li.show #featured-counselor').delay( 100 ).animate({"left": "-230px"}, 900, 'easeInOutQuint');//Slide Back In
    $('article[role=main] aside ul li.show #caption').delay( 500 ).fadeOut(400);//Remove the Caption
current = $('article[role=main] aside ul li.show');
next = $(current).next();
$(next).toggleClass("show");
$(current).toggleClass("show);
}// End hideCurrentCounselor

Это может сработать.

Я очень ценю вашу помощь, однако этот код ждет 5 секунд, а затем выполняет
Спасибо за вашу помощь. Хотя я не использовал весь предоставленный вами код, я использовал самую последнюю часть, которая устанавливает «Далее» и «Текущий». Вы указали мне правильное направление, и теперь все работает. Я ценю вашу помощь.