Вращающийся Div снизу вверх

Здравствуйте, я хочу изменить переход моих скользящих текстов. Текущий эффект - затухание и исчезновение, но я бы хотел, чтобы .quotes скользил или прокручивался вверх, а затем следующий блок из .quotes. Что-то вроде вращающегося div, но переход к вершине. Я пробовал slideTop(), но он немного отличается от того, что я хочу. Вот мой текущий код и jsfiddle Вращающийся Div снизу вверх

HTML:

<div class="quotes"> 
<h3 class="heading green">GoScRUB orks Much Faster than a scrub brush on tough build-up</h3> 
<h3 class="heading green">GoScRUB aves Money – it is about 1/10 the cost of a scrub rush</h3> 
</div> 

<div class="quotes"> 
<h3>GoScRUB s Better for the Environment than a scrub brush – less waste</h3> 
<h3>GoScRUB s More Effective than a scrub brush – it lifts and peels off the debris</h3> 
</div> 

<div class="quotes"> 
<h3 class="heading green">GoScRUB Cleans Easily and is much more sanitary than a scrub brush</h3> 
<h3 class="heading green">GoScRUB Lasts 10x Longer than a scrub brush (or more)</h3> 
<h3 class="heading green">GoScRUB llows your Scrub Pads to Last Much Longer</h3> 
</div>

Javascript:

(function() { 
    var quotes = jQuery(".quotes"); 
    var quoteIndex = -1; 
    function showNextQuote() { 
    ++quoteIndex; 
    quotes.eq(quoteIndex % quotes.length) 
    .fadeIn(2000) 
    .delay(2000) 
    .fadeOut(2000, showNextQuote); 
    } 

    showNextQuote(); 

    })();

CSS:

.quotes h3{ 
padding-left:20px; 
line-height: 52px; 
margin-bottom: 13px; 
} 

.quotes {display: none;} 

.heading-slide h3{ 
font-size:34px; 
}

источник

2014-01-13 markyeoj

Вам нужен родительский контейнер для работы в качестве маски с 'переполнении : hidden ", когда вы анимируете цитаты сверху. – otinanai

Спасибо, вы можете показать это мне, используя мой jsfiddle? Спасибо :) – markyeoj

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

Here's the demo. (Это не оптимизировано, но вы получаете основную идею)

источник

2014-01-13 11:43:32 otinanai

Вот что я ищу, спасибо @otinanai .. – markyeoj

это вы хотите:

(function() { 
    var quotes = jQuery(".quotes"); 
    var quoteIndex = -1; 
    function showNextQuote() { 
    ++quoteIndex; 
    quotes.eq(quoteIndex % quotes.length) 
    .slideDown(1000) 
    .delay(4000) 
    .slideUp(1000, showNextQuote); 
    } 

    showNextQuote(); 

    })();

источник

2014-01-13 09:41:04 Era

Я ценю это, но я уже пробовал это, но это не то, что я хочу, я хочу, чтобы div прокручивался вверх. – markyeoj

В основном, вам нужна вертикальная карусель.

Есть много способов в ведьме вы можете достичь того, чего хотите. один их является:

это должно быть сделано в 2 этапа:

цикл между элементами - сделано в JS
добавить прокрутки анимации - сделано в CSS

первая часть вам (или любой другой плагин цикла)

для второй части. вам нужно будет изменить некоторые CSS.

.carousel-inner > .active { 
    left: 0; 
} 
.carousel-inner > .next { 
    left: 100%; 
} 
.carousel-inner > .prev { 
    left: -100%; 
}

.carousel-inner > .active { 
    top: 0; 
} 
.carousel-inner > .next { 
    top: 100%; 
} 
.carousel-inner > .prev { 
    top: -100%; 
}

, что я сделал было взять все ссылки влево/вправо и изменить их на верх/низ

источник

2014-01-13 12:02:29

Вращающийся Div снизу вверх

ответ

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