Question

我找到了一个很好的方法，可以将博客上的大帖子分成多个页面：http://blogtimenow.com/blogging/splitting-long-blog-post-blogger/

我试图在切换页面时添加淡入淡出效果，但我不知道如何做到这一点，我对jquery没有经验...

到目前为止，我设法将页面滚动到顶部，并使用时间值添加了一些动画，但它看起来不太正确。

jQuery(document).ready(function(){
jQuery('.page1').click(function(){
jQuery("html, body").animate({ scrollTop: 0 }, "slow");
jQuery('.content1').show(2000);
jQuery('.content2').hide(1000);
jQuery('.content3').hide(1000);
jQuery('.content4').hide(1000);
jQuery('.content5').hide(1000);

基本上我想要的是当前的＆＃34;页面＆＃34;淡出和下一个＆＃34;页面＆＃34;淡出...

Answer 1

使用以下代码

以下javascript会在切换页面时在页面上添加效果fadeIn-fadeOut。

<script type="text/javascript">
            $(document).ready(function() {
                $("body").fadeIn(800);
                $("a").not(".no-fade").click(function(event){
                    event.preventDefault();
                    linkLocation = this.href;
                    $("body").fadeOut(400, redirectPage);      
                });
                // Redirects page
                function redirectPage() {
                   window.location = linkLocation;
                }
            });
    </script>

将上述代码放入<head>页面

Html

Answer 2

添加此代码

jQuery(document).ready(function(){
jQuery('.page1').click(function(){
jQuery("html, body").animate({ scrollTop: 0 }, "slow");
jQuery('.content1').fadeIn(2000);
jQuery('.content2').fadeOut(1000);
jQuery('.content3').fadeOut(1000);
jQuery('.content4').fadeOut(1000);
jQuery('.content5').fadeOut(1000);

在JQuery中使用.hide（）。show（）淡化效果

2 个答案: