Question

您好我想更改滑动文本的转换。当前效果是淡入和淡出，但我希望.quotes滑动或滚动到顶部，然后.quotes的下一个块将跟随。像旋转div一样，但过渡到顶部。我试过slideTop()，但它与我想要的不同。这是我当前的代码和jsfiddle

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;
}

Answer 1

就像我在评论中所说的那样，我采取的方法是使用隐藏底层孩子的父div，并且一次只显示一个引号。当显示引号并将动画设置为顶部（在父级之外）时，它将附加在父级的末尾。

<强> Here's the demo 即可。 （它没有优化，但你得到了基本的想法）

Answer 2

这是你想要的：

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

    showNextQuote();

    })();

Answer 3

基本上你需要的是垂直旋转木马。

女巫有很多方法可以达到你想要的效果。一个是：http://getbootstrap.com/javascript/#carousel

这应该分两步完成：

项目之间的循环 - 在JS中完成
添加滚动动画 - 在CSS中完成

您可以从twitter bootstrap（或任何其他循环插件）中获取第一部分

第二部分。你需要改变一些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%;
}

我所做的是将所有引用左/右并将它们更改为顶部/底部

从底部到顶部旋转Div

3 个答案: