javascript - 如何使用 jQuery 同时在多个元素上更改不同的 css 属性

标签 javascript jquery html css

我有这段代码可以使标题和标题中的 img 在向下滚动时缩小。它工作正常,除了它真的很跳跃,因为一个 css 属性先于另一个改变。有没有办法同时进行这两项更改?

$(window).scroll(function() {
    if ($(this).scrollTop() > 0){  
        $('#section-header-0').css({
           'line-height' : '44px'
        });

        $('#logo').css({
           'width' : '200px'
        });
    }
    else{
        $('#section-header-0').css({
           'line-height' : '96px'
        });

        $('#logo').css({
           'width' : '394px'
        });
    }
});

最佳答案

$(window).scroll(function() {
    if ($(this).scrollTop() > 0){  
        $('#section-header-0').css({
           'line-height' : '44px'
        },{ duration: 200, queue: false });

        $('#logo').css({
           'width' : '200px'
        },{ duration: 200, queue: false });
    }
    else{
        $('#section-header-0').css({
           'line-height' : '96px'
        },{ duration: 200, queue: false });

        $('#logo').css({
           'width' : '394px'
        },{ duration: 200, queue: false });
    }
});

我希望上面的内容对你有帮助队列:false 基本上告诉他们立即运行而不是在队列中运行

关于javascript - 如何使用 jQuery 同时在多个元素上更改不同的 css 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29976871/

相关文章:

html - 如何使用CSS隐藏表格的第二行?

javascript - 鼠标按钮的 onClick 通用吗?

javascript - 如何删除具有特定属性值的 HTML 元素?

javascript - 如何使用 jQuery 将输入值传递给按钮变量

javascript - php & mysql 和 ajax(将图像插入 CRUD 应用程序)

javascript - 如何将值附加到隐藏字段?

javascript - jQuery 点击切换

html - 使 CSS 下拉菜单居中

javascript - 纯Js中的搜索功能过滤li的

javascript - Jasmine toHaveBeenCalledWith 部分匹配