3

关于为什么这有时会使页面跳转的任何想法。看起来fadeOut 实际上是在移除元素#main 的高度。它的高度在 CSS 中声明。在 FireFox 20 中测试

$('.active').click(function(){
    $('#main').fadeOut(1100, function() {
        $(this).load('blank.html', function() {
            $(this).fadeIn(1100);
        });
    });
    return false;
});

<div id="main" style="margin-bottom:30px;overflow:hidden">
    <div class="slider nivoSlider">
        <img src="1.jpg" alt="" />
        <img src="2.jpg" alt="" />
        <img src="3.jpg" alt="" />
        <img src="4.jpg" alt="" />
    </div>
</div>

<li><a href="blank.html" class="active">Projects (a)</a></li>
4

4 回答 4

10

fadeIn并fadeOut在内容淡出完成后将显示设置为无，这使得元素消失，页面上的流程被中断。尝试只为不透明度设置动画：

$('.active').click(function(){
    $('#main').animate({opacity: 0}, 1100, function() {
        $(this).load('blank.html', function() {
            $(this).animate({opacity: 1}, 1100);
        });
    });
    return false;
});
于 2013-03-04T22:59:21.077 回答
2

fadeOut也可以hide，大致相当于调用.css('display', 'none')

dislay: none, 从布局中完全隐藏元素（及其尺寸）。

opacity如果您对此有疑问，将其设置为 0 可能更安全

于 2013-03-04T22:59:41.640 回答
1

您还可以为高度和填充设置动画，0px如下所示：

$('#main').animate({height:'0px', padding:'0px'}, {duration: 1100});

使用这种方法，站点不会跳跃，因为高度会慢慢变小。

于 2020-04-10T17:34:55.760 回答
0

没有看到你的 HTML 很难说，但我想你有一个锚点 ( <a></a>) 上的活动类。请执行下列操作：

$('.active').click(function(e){
       e.preventDefault();
       $('#main').fadeOut(1100, function() {
           $(this).load('blank.html', function() {
               $(this).fadeIn(1100);
           });
       });
       return false;
});
于 2013-03-04T22:57:29.423 回答