2

这看起来一定是个荒谬的问题，尤其是当这是我的工作时，但对于 CSS 和 JavaScript 的定位和大小，我不了解某些微妙之处。

我有一个“动画”对象的函数（使用给定的缓动函数更改它们的属性）。每次动画进行时，都会调用一个应该调整测试 div 大小的回调，但 div 保持原样。它一定很简单，但我就是不明白。

这是一个小提琴：http: //jsfiddle.net/sd9tJ/

还有一段代码，所以我可以提交问题：D

$(document).ready(function() {

    var surface = {w : 100, h : 100};

    var $div = $('#test');

    $t.animate(surface, {w : 200, h : 200}, 2000, $t.easing.linear, function() {
        document.body.innerHTML += '('+Math.round(surface.w)+'/'+Math.round(surface.h)+')';
        $div.css({
            width  : Math.round(surface.w) + 'px',
            height : Math.round(surface.h) + 'px'
        });
    });
});

值是正确的，但样式不想更新，所以我认为它与 CSS 相关。

任何想法 ？

谢谢你的帮助:)

4

2 回答 2

2

将其更改为：

   $('#test').css({
        width  : Math.round(surface.w) + 'px',
        height : Math.round(surface.h) + 'px'
    });
于 2013-07-22T19:00:13.120 回答
2

问题在于调试技术：

    document.body.innerHTML += ... ;

这会拾取原始 HTML<div>并重新添加它，因为它最初位于页面加载时。把它拿出来，它工作正常。

编辑——如果你在处理程序中使用，事情会起作用的原因$('#test')是它会导致 jQuery 出去并再次找到元素。因此，它找到了更新的，并且一切正常。

像这样添加到文档中会导致问题的原因是它与以下内容相同：

    document.body.innerHTML = document.body.innerHTML + whatever;

获取当前innerHTML的页面可以让您在没有元素样式更新的情况下获得页面。然后它重新创建整个页面 DOM。使用console.log()，或者在页面上创建一个特殊元素并单独更新其 HTML。

于 2013-07-22T19:02:59.877 回答