jQuery css promise 完成

Question

有人可以给我建议吗:

示例:我有

<div id="breadCrumb" style="width:80%"></div>

不是，我想将此宽度更改为1oo%，并在点击时获取以px为单位的宽度

$('#menu_toggle').on('click', function() {
    var cache = $('#breadCrumb');

    cache.css('width', "100%").promise().done(function(){   
        console.log(cache.width());
    });
});

但我仍然得到 80% 值。

如果我再次单击，只有这样我才能获得 100% 像素值

这个想法是等到应用CSS并在之后获取新的宽度

有人有什么想法吗？

感谢您的帮助!

Answer 1

css 立即完成工作，非常简单

cache.css('width', "100%");
console.log("breadCrumb width: " + cache.width());

应该可以工作，并且可以在 Chrome 和 Firefox 上运行，除非您没有向我们展示某些内容:

$('#menu_toggle').on('click', function() {
    var cache = $('#breadCrumb');

    cache.css('width', "100%");
    console.log("breadCrumb width: " + cache.width());
    console.log("body width: " + $(document.body).width());
});

#breadCrumb {
  border-bottom: 2px solid blue;
}

<div id="breadCrumb" style="width:80%"></div>
<input id="menu_toggle" type="button" value="Click Me">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

但是如果您需要给浏览器一些时间来应用更改，您可以使用 setTimeout 来执行此操作:

$('#menu_toggle').on('click', function() {
    var cache = $('#breadCrumb');

    cache.css('width', "100%");
    setTimeout(function() {
      console.log("breadCrumb width: " + cache.width());
      console.log("body width: " + $(document.body).width());
    }, 50);
});

#breadCrumb {
  border-bottom: 2px solid blue;
}

<div id="breadCrumb" style="width:80%"></div>
<input id="menu_toggle" type="button" value="Click Me">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>