Question

我使用jquery将文本向左滑动，但最后，文本仍然存在，我希望文本完全脱离页面。

这是jquery：

$(document).ready(function() {
        $('.overlay').delay(5000).animate({
                height: 'toggle'
                }, 1000, function() {
        }); 
        $('.overlay-text').delay(4900).animate({ width: '50%', height: '50%' }, 'slow');
});

和HTML

<div class="container">
                <div class="overlay">
                        <div class="overlay-text">
                                Text
                        </div><!--overlay-text-->
                </div><!--overlay-->
                <div class="second-overlay">
                        <div class="second-overlay-text left">
                                More Text
                        </div><!--second-overlay-text-left-->
                        <div class="second-overlay-text right">
                                More Text
                        </div><!--second-overlay-text-right-->
                </div><!--second-overlay-->
        </div><!--container-->

如何让第一个文字从页面滑落？

http://jsfiddle.net/hh27b60n/

Answer 1

添加

position: relative;

到.overlay-text和.container

然后将您的动画更改为：

$('.overlay-text').delay(300).animate({ left: "-999px" }, 'slow');

这会将文字滑出页面

http://jsfiddle.net/2f5gnb5g/1/

Answer 2

我通过为right而不是width设置元素的CSS动画取得了成功：

在文本元素中添加了position:relative以便为其提供位置：

.overlay-text {
    position:relative;
    ...
}

$('.overlay-text').delay(4900).animate({ right: '100%' }, 'slow');

WORKING EXAMPLE

修改

我忘了淡出了。我会通过在CSS和动画中添加“不透明度”来做到这一点：

.overlay-text {
    position:relative;
    opacity:1;
    ...
}

$('.overlay-text').delay(4900).animate({
    right: '100%',
    opacity:0
}, 'slow');

WORKING EXAMPLE

jQuery向左滑动文本并淡出

2 个答案:

修改