4

我对 jQuery 淡入（或淡出）方法有疑问。我建立了一个文章旋转器，一切正常，但是当页面滚动到底部并且文章旋转时出现问题，fadeIn（或fadeOut）方法会导致滚动到文章位置。我认为这些方法会改变 body 的 css top 属性，但我不知道如何避免这种情况！任何想法？？？

这里的代码

    function rotate(direction)
{
    if($('articles > article:visible:first') == 'undefined')
        $currentArticle = $('articles > article:first');
    else
        $currentArticle = $('articles > article:visible:first');

    if($currentArticle.attr('id') == $('articles > article:last').attr('id'))
        $next = $('articles > article:first');
    else
        $next = $currentArticle.next();

    if($currentArticle.attr('id') == $('articles > article:first').attr('id'))
        $prev = $('articles > article:last');
    else
        $prev = $currentArticle.prev();

    if($do_animation)
    {
        $currentArticle.fadeOut(1000,function(){
                switch(direction)
                {
                    case 1:
                        $next.fadeIn(1000);
                        break;
                    case -1:
                        $prev.fadeIn(1000);
                        break;
                }
                if($('.rotate_show'))
                    $('.rotate_show').removeClass('rotate_show');
                $('article_number > btn[id|="'+$next.attr('id')+'"]').addClass('rotate_show');
                });
    }
    else
        return false;
}

好的，这里的网站http://kario91.altervista.org/ultimate文字来自 joomla 这是完整的网站！变量工作正常，没有问题..尝试缩小浏览器窗口并滚动底部

4

3 回答 3

5

我很想说这个问题是因为当你的文章完全淡出时，就在调用回调之前，你的页面高度降低了（因为文章被隐藏了），因此浏览器滚动直到页面底部（没有文章）位于浏览器窗口的底部。尝试在完成后删除回调fadeOut，您可能会注意到浏览器如何对齐底部。

我认为您可以通过在fadeOut 存在之前为文章容器提供一个高度来解决此问题，并且当fadeOut 完成后，在fadeIn 开始后立即删除该高度......或类似的东西。

我希望这有帮助！

于 2011-02-07T14:45:18.907 回答
2

I solved it with fadeTo(), it is something like this

Backup your position

$("#position").attr("name","scroll"+$("body").scrollTop());

FadeOut:

$("#content").fadeOut(300,function(){........});

To go back do a "semi" fadeIn and callback the position with:

$("#content").fadeTo(10,0.1,function(){

$("body").scrollTop($("#position").attr("name").replace("scroll",""));


});

and them fade completly in

$("#content").fadeTo(300,1);
于 2012-11-04T11:15:57.637 回答
1

将高度设置为父容器解决了这个问题。

于 2012-04-16T20:52:56.533 回答