JQuery .animate()修改代码块中不包含的属性

JQuery .animate() modifying properties not included in code block

本文关键字：包含 属性 代码 animate 修改 JQuery      更新时间：2023-09-26

我正在尝试创建一个动画，沿着x轴压缩标题，直到宽度和高度为50px，然后沿着y轴展开，创建一个宽度为50px的边栏，如果窗口向下滚动，当窗口滚动到顶部时，情况正好相反。

当用户从0向下滚动时，动画运行良好，但是当窗口滚动到顶部时，ShowHeader()中的第二个animate()方法将height: 100%添加到元素中，即使只指定了width: 100%，因此标题填充了页面。

我想知道当只指定宽度时，animate()方法从哪里获得修改高度的指令。

$(function HideHeader() {
$(window).scroll(function () {
    if ($(this).scrollTop() > 0) {
        $('header').animate({
            "width": "50px"
        }, {
            queue: false,
            complete: function () {
                $("#navtop").fadeOut("fast", function () {
                    $('header').animate({
                        "height": "100%"
                    }, {
                        queue: false,
                        complete: function () {
                            $("#navside").fadeIn("fast");
                        }
                    })
                })
            }
        });
    }
});
});
$(function HideHeader() {
$(window).scroll(function () {
    if ($(this).scrollTop() === 0) {
        $('header').animate({
            "height": "50px"
        }, {
            queue: false,
            complete: function () {
                $("#navside").fadeOut("fast", function () {
                    $('header').animate({
                        "width": "100%"
                    }, {
                        queue: false,
                        complete: function () {
                            $("#navtop").fadeIn("fast");
                        }
                    })
                })
            }
        });
    }

});
});

这里也有一个JSFiddle链接:http://jsfiddle.net/2ERDesign/bm84y/1/

这是关于排序动画，一个基本的解决方案是:

$(function HideHeader() {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 0) {
            $('header').animate({
                "width": "50px"
            }, {
                queue: false,
                complete: function () {
                    $("#navtop").fadeOut("fast", function () {
                        $('header').animate({
                            "height": "100%"
                        }, {
                            queue: false,
                            complete: function () {
                                $("#navside").fadeIn("fast");
                            }
                        })
                    })
                }
            });
        }
    });
});
$(function HideHeader() {
    $(window).scroll(function () {
        if ($(this).scrollTop() === 0) {
            $('header').animate({
                "width": "100%"
            }, {
                queue: false,
                complete: function () {
                    $("#navside").fadeOut("fast", function () {
                        $('header').animate({"height": "50px"
                        }, {
                            queue: false,
                            complete: function () {
                                $("#navtop").fadeIn("fast");
                            }
                        })
                    })
                }
            });
        }

    });
});
http://jsfiddle.net/bm84y/3/

虽然更推荐使用纯CSS，或者甚至使用transit.js

我还是推荐这个

#header{
-webkit-transition: width 0.4s; /* For Safari 3.1 to 6.0 */
transition: width 0.4s;
}

，而不是使用animate只是使用css("height","50px")与css("width","100%")和css("height","100%")与css("width","50px")

相关文章：