jquery hide only working on element with border

Question

This is an odd one. Via jquery, I want to create a container object, visually hide it, load AJAX content into it, and, when loaded with content, show.

What's odd is that it only seems to hide the object if said object is given a border. Example:

This works:

tr.find('td')
    .html("<div class='inlineLoading'>loading...</div>"
         + "<div "
         +    "class='loadedContent' "
         +    "style='background: green; border: 1px solid red;'>"
         + "</div>"
    )
;

var container = tr.find('div.loadedContent');
container.hide('slow',loadContent(container,dataURL));

the loadContent function:

function loadContent(container,dataURL) {  
    container.load(dataURL)  
}  

Running the above, it works as intended. I clearly see the DIV with the red border get created, then slowly hide itself. Viewing the rendered source, I can confirm the ajax call is loading the content as well.

However, if I omit the red border from above, it never hides itself. The div clearly loads (with the green background), doesn't hide itself, and then loads the content from the LOAD call within.

Any thoughts as to what might be going on here? This is all being run in Firefox.

Answer 1

to easily debug this, dont hide the content, let it load into the div first and see if its working fine, then do the hiding and showing. this way, you will know what gets in the div, cause it might be just pulling from ajax and never inserts inside the div.