затемнение фона наложения jquery не исчезает в IE9 после отмены наложения

Question

Позвольте мне предварить это, сказав, что я новичок в jquery и довольно плохо знаком с javascript.

Я немного искал и нашел оверлейный урок, которому смог следовать, и на данный момент я даже не помню, где я его получил. У меня есть следующее, что работает (почти):

function showOverlayBox() {
//if box is not set to open then don't do anything
if( isOpen == false ) return;
// set the properties of the overlay box, the left and top positions
$('.overlayBox').css({
    display:'block',
    left:($(window).width() - $('.overlayBox').width()) / 2,
    top:($(window).height() - $('.overlayBox').height()) / 2 -20,
    position:'absolute'
});
// set the window background for the overlay. i.e the body becomes darker
$('.bgCover').css({
    display:'block',
    width: $(window).width(),
    height:$(window).height()
});
}

function doOverlayOpen() {
//set status to open
isOpen = true;
showOverlayBox();
$('.bgCover').css({opacity:0}).animate({opacity:0.5, backgroundColor:'#000'});
// dont follow the link : so return false.
return false;
}

function doOverlayClose() {
//set status to closed
isOpen = false;
$('.overlayBox').css( 'display', 'none' );
// now animate the background to fade out to opacity 0
// and then hide it after the animation is complete.
$('.bgCover').animate({opacity:0}, null, null, $(this).hide(););
}

<style type="text/css">
body { font:76% verdana; }
.bgCover { background:#000; position:absolute; left:0; top:0; display:none; overflow:hidden }
.overlayBox {
border:5px solid #09F;
position:absolute;
display:none;
width:500px;
height:300px;
background:#fff;
overflow: scroll;
}
.overlayContent {
padding:10px;
}
.closeLink {
float:right;
color:red;
}
a:hover { text-decoration:none; }

h2 {
padding:5px;
margin:0;
}
</style>

<div class="bgCover">&nbsp;</div>
<div class="overlayBox">
<div class="overlayContent">
    <a href="#" class="closeLink">Close</a>
</div>
</div>
<a href="#" class="launchLink">Launch Window</a>

<script type="text/javascript">
// if window is resized then reposition the overlay box
$(window).bind('resize',showOverlayBox);
// activate when the link with class launchLink is clicked
$('a.launchLink').click( doOverlayOpen );
// close it when closeLink is clicked
$('a.closeLink').click( doOverlayClose );
</script>

Это нормально для меня на отдельной странице. Тем не менее, по какой-то причине, когда я помещаю это на нужную мне страницу, когда я нажимаю на кнопку закрытия на оверлее, bgCover не исчезает. Это происходит в IE9, но не в FF 3.6.10. Если я закомментирую строку:

$('.bgCover').css({opacity:0}).animate({opacity:0.5, backgroundColor:'#000'});

в doOverlayOpen, он работает как положено, за исключением, конечно, что .bgCover все черный и непрозрачный (я предполагаю, что это потому, что анимация никогда не происходит).

Если я заменим вызов функции в анимированном вызове doOverlayClose (в данный момент просто выполняющий $ (this) .hide ();) на функцию, я вижу, что он никогда не вызывается. Пример:

function doOverlayClose() {
//set status to closed
isOpen = false;
$('.overlayBox').css( 'display', 'none' );
// now animate the background to fade out to opacity 0
// and then hide it after the animation is complete.
$('.bgCover').animate({opacity:0}, null, null, testFunction);
}

function testFunction() {
    alert("GotHere!");
    $(this).hide();
}

Предупреждение никогда не срабатывает.

Похоже, что при некоторых обстоятельствах на IE9 по каким-то причинам не происходит удаление строки, но я не могу понять, почему.

Очевидно, что существует разница в окружении между двумя страницами (где это работает, а где нет), но я не нахожу ничего, что бы мне точно говорило. Кто-нибудь может указать мне правильное направление того, что я должен искать?

Answer 1

Что произойдет, если вы не используете CSS?

doOverlayOpen{
...
    $('.bgCover').animate({opacity:0.5, backgroundColor:'#000'});
}

doOverlayClose
...
    $('.bgCover').animate({opacity:0, backgroundColor:'transparent'});
}