Дивы, которые затухают в петле

Я просмотрел все другие вопросы, похожие или похожие на мои, но я все еще не могу найти то, что ищу. Я все еще новичок в jquery, но все, что я хочу, это мои три divs, которые будут в цикле и исчезают, когда они меняются. То, что я вижу, это люди, использующие быстрые скорости, первый div также исчезает, а затем остальные будут следовать, но я хочу, чтобы первый div просто присутствовал, когда страница загружается, а затем переключается через некоторое время. Вот моего HTMLДивы, которые затухают в петле

<div id="Reviews"> 
    <div class="Review1"> 
     <p>Customer Review 1</p> 
     <span class="CustomerName">- Bob</span> 
    </div> 
    <div class="Review2"> 
     <p>Customer Review 2</p> 
     <span class="CustomerName">- Mary</span> 
    </div> 
     <div class="Review3"> 
     <p>Customer Review 3</p> 
     <span class="CustomerName">- Jess</span> 
    </div> 
</div>

Теперь у меня есть отдельные классы для них, но я предпочел бы создать запрос, чтобы увянуть в и по телефону с помощью «#Reviews Див» что-то подобное, но изменения имен класса divs прекрасно, если это необходимо, чтобы заставить меня исчезать/выходить на работу. Я бы предпочел просто добавить отзывы, если это необходимо, и он будет просто подстраиваться под именем класса или просто быть div. Я также вижу кодирование, которое приведет к исчезновению моих div, но следующий div будет отображаться ниже текущего, а затем текущий исчезнет, а следующий движется вверх, где, когда я хочу, чтобы он оставался вертикально выровненным, вершина просто исчезала и когда он находится на петле, поэтому он всегда возвращается к первому, а затем снова возвращается. Я думал, что это будет легче сделать, но, видимо, нет. Я пробовал использовать кодировку из того, что я видел из других вопросов, но я просто не могу найти то, что я ищу специально.

источник

2016-12-28 xohbrittx

Так что вы хотите review1 исчезать в то review2 тогда обзоре3 ..should это происходит непрерывно и в цикле – Geeky

Если вы хотите FadeIn и FADEOUT всех дивов в цикле .Вы может сделать как следующий

проверкой этого фрагменту

$(document).ready(function() { 
 

 
    setInterval(function() { 
 
    fadeinOut(); 
 
    }, 1000) 
 
}); 
 
var count = -1; 
 

 
function fadeinOut() { 
 
    var reviews = $('#Reviews div'); 
 
    var reviewLength = reviews.length - 1; 
 

 
    count < reviewLength ? count++ : count = 0; 
 
    reviews.fadeOut().delay(2000).eq(count).fadeIn().addClass('top'); 
 
}

#Reviews div {} #Reviews { 
 
    position: relative; 
 
} 
 
#Reviews div:not(.Review1) { 
 
    display: none; 
 
} 
 
.top { 
 
    display: block; 
 
    z-index: 1; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="Reviews"> 
 
    <div class="Review1"> 
 
    <p>Customer Review 1</p> 
 
    <span class="CustomerName">- Bob</span> 
 
    </div> 
 
    <div class="Review2"> 
 
    <p>Customer Review 2</p> 
 
    <span class="CustomerName">- Mary</span> 
 
    </div> 
 
    <div class="Review3"> 
 
    <p>Customer Review 3</p> 
 
    <span class="CustomerName">- Jess</span> 
 
    </div> 
 
</div>

Надеется, что это помогает

источник

2016-12-28 18:22:39 Geeky

Вы видите, как это выглядит, когда вы запустите его? Элементы появляются на месте - не изящно изгибаются друг в друга. –

Спасибо @JonUleis за указание на это.изменил фрагмент кода – Geeky

Это то, что я хочу, но отзывы будут разными, поэтому мне нужно некоторое время между проверками переключения, например, с задержкой – xohbrittx

Вот быстрая реализация с использованием jQuery с "slick" carousel plugin. Запустите демо ниже, чтобы увидеть его в действии.

$(document).ready(function() { 
 
    $('#Reviews').slick({ 
 
    fade: true, // change transition from slide to fade 
 
    autoplay: true, // autoplay the slideshow so no interaction needed 
 
    arrows: false // remove the default Prev/Next arrrows 
 
    }); 
 
});

<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick.css" /> 
 

 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
 

 
<script type="text/javascript" src="http://kenwheeler.github.io/slick/slick/slick.js"></script> 
 

 
<div id="Reviews"> 
 
    <div class="Review1"> 
 
    <p>Customer Review 1</p> 
 
    <span class="CustomerName">- Bob</span> 
 
    </div> 
 
    <div class="Review2"> 
 
    <p>Customer Review 2</p> 
 
    <span class="CustomerName">- Mary</span> 
 
    </div> 
 
    <div class="Review3"> 
 
    <p>Customer Review 3</p> 
 
    <span class="CustomerName">- Jess</span> 
 
    </div> 
 
</div>

источник

2016-12-28 18:23:39

Если вы хотите сделать это в чистом CSS, Вы можете сделать это, используя @keyframes

Это решение очень специфичны для использования. Имеет 3 divs и 3 секунды видимости.

У вас может быть время X секунд для отображения всех разделов один раз в цикле.

Дайте каждому div свою долю X и повторите анимацию.

Для простоты я определил X как 6 секунд, поэтому каждый из ваших обзорных divs получает 3 секунды времени.

Если вы ищете вдохновение, чтобы реализовать что-то самостоятельно, мы надеемся, что это может быть вашей отправной точкой.

.reviews { 
 
    position: relative; 
 
} 
 
.review { 
 
    position: absolute; 
 
    transform-style: preserve-3d; 
 
    animation-duration: 6s; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: linear; 
 
} 
 
.review-1 { 
 
    animation-name: reviewOne; 
 
    color: red; 
 
} 
 
.review-2 { 
 
    animation-name: reviewTwo; 
 
    color: blue; 
 
} 
 
.review-3 { 
 
    animation-name: reviewThree; 
 
    color: green; 
 
} 
 
@keyframes reviewOne { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    32% { 
 
    opacity: 1; 
 
    } 
 
    33% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 0 
 
    } 
 
} 
 
@keyframes reviewTwo { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    32% { 
 
    opacity: 0; 
 
    } 
 
    33% { 
 
    opacity: 0.5; 
 
    } 
 
    34% { 
 
    opacity: 1; 
 
    } 
 
    65% { 
 
    opacity: 1; 
 
    } 
 
    66% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 0 
 
    } 
 
} 
 
@keyframes reviewThree { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    65% { 
 
    opacity: 0; 
 
    } 
 
    66% { 
 
    opacity: 0.5; 
 
    } 
 
    67% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
}

<div id="reviews"> 
 
    <div class="review review-1"> 
 
    <p>Customer Review 1</p> 
 
    <span class="CustomerName">- Bob</span> 
 
    </div> 
 
    <div class="review review-2"> 
 
    <p>Customer Review 2</p> 
 
    <span class="CustomerName">- Mary</span> 
 
    </div> 
 
    <div class="review review-3"> 
 
    <p>Customer Review 3</p> 
 
    <span class="CustomerName">- Jess</span> 
 
    </div> 
 
</div>

источник

2016-12-29 06:24:09 Sreekanth

Дивы, которые затухают в петле

ответ

Смежные вопросы