javascript - 让 jQuery 立即改变高度而不是在第二次运行时改变高度？

Question

请查看下面的 jsfiddle(抱歉布局丑陋)。

http://jsfiddle.net/neowot/7hLrLdn2/8/ <---精简版...

如果您在框中输入内容并按 Enter，则包含您的元素的 div 将添加到左侧列。此外，包含单词“Bands”的 div 将添加到右列。

红色代表左边div的高度。橙色代表右侧 div 的高度。

有一个 jQuery 函数用于匹配右侧 div 的高度和左侧 div 的高度。但是请注意，右边的 div 高度较小，而不是等高。

有趣的是，如果您键入其他内容并按回车键，您会注意到右侧的高度与左侧的 div 匹配。因此，这意味着代码可以正常工作，但会延迟。

我怎样才能使代码立即运行，以便在您第一次 按下回车键后，右边的 div 高度等于左边的 div 高度？

函数的定义在“//Where The Functions Are Defined”下

调用的地方在“//Where The Functions Are Called”下

谢谢。

JS定义

$(document).ready(function() {


/*--------------------------------------------------------------*/    
    //Where The Functions Are Defined 


function setMusicHeight(){  
    var UserMusicHeightX = $('#MusicDiv').outerHeight();
    var GenreMusicHeightX = $('#GenreMusicDiv').outerHeight();

JS调用

$('form').submit(function () {


/*--------------------------------------------------------------*/        
            //Where The Functions Are Called 
            setMusicHeight();                 
            setMovieHeight();
            setBookHeight();

Answer 1

您的脚本 正在尝试检索仍在显示的元素height - 如果它们不可见，该属性将返回 0 或更小的数字如果它们处于完全可见的中途，则应该比它应该的要多。

解决方案是相应地在 .fadeIn() 和 .slideToggle() 回调上调用调整大小的脚本。您可以简化并在每种情况下只调用必要的。

一般来说，它会是这样的:

function resize() {
    setMusicHeight();
    setMovieHeight();
    setBookHeight();
}

$('#MusicDiv').fadeIn(resize);

.slideToggle(270, resize)

Demo

.slideToggle()

.fadeIn()