通过jquery通过媒体查询对左填充进行动画处理

Question

我有一个类navbar_media_queries的样式，因此以后可以使用jquery进行操作。

CSS

<style class="navbar_media_queries">
    @media (min-width: 736.99px) {
        .navbar_menu {
            padding-left: 150px !important;
        }
    }
</style>

JQUERY

通过带有jQuery的click事件，我根据按钮的当前状态将左填充从100px切换到150px。

$(".navbar_media_queries").text("@media (min-width: 736.99px) { .navbar_menu { padding-left: 100px !important; } }");

或

$(".navbar_media_queries").text("@media (min-width: 736.99px) { .navbar_menu { padding-left: 150px !important; } }");

我想为填充更改padding-left设置动画，以便在更改时可以平滑而不是立即进行。这可能吗？我不确定是否需要使用jquery或css进行操作，也不知道该怎么做。