Question

嗨，我动画了背景图片。在Firefox中它工作正常，但在IE上它给了我$(header.css(...) is null or not an object)的错误。这是我的代码

var $header = $(".overlayBox");
$header.css("backgroundPosition", "0 0");

var bgScroll = function() {

    **var current = parseInt($header.css("backgroundPosition").split(" ")[1]),   //This is the line that IE is mentioning**      
    newBgPos = "0 " + (current - 1) + "px";
    //Finally we set the new background-position using jQuery's css() method.
    $header.css("backgroundPosition", newBgPos);

} //end of bgScroll()

setInterval(function() { bgScroll() }, 75);

为什么它不能在IE中运行？我也在使用叠加层。在Firefox中当我点击叠加时，叠加消失。但在IE上当我点击叠加时，没有任何事情发生。这是

的代码

// close it when closeLink is clicked
$('a.closeLink').click( doOverlayClose );    

function doOverlayOpen() {

    //set status to open
    isOpen = true;
    showOverlayBox();
    ...
    addEvents();

    // dont follow the link : so return false.
    return false;

} //end of doOverlayOpen()

function doOverlayClose() {

    //set status to closed
    isOpen = false;
    var test = $(".overlayBox");
    $('.overlayBox').css( 'display', 'none' );   

    $('.bgCover').animate({         //This is not working in IE
        opacity:0
    }, null, null, function() {
        $(this).hide();
    });

} //end of doOverlayClose()

function addEvents() {     //Now working in IE

    //Click out event!
    $(".bgCover").click(function(){
        doOverlayClose();
    });

    //Press Escape event!
    $(document).keypress(function(event){

        // IF Esc key press and popup is visible
        if (event.keyCode==27 && isOpen==true) {
            doOverlayClose();
        }
    }) ;

} //end of addEvents()

我还在我的div中添加了关闭链接，如

<div class="bgCover">&nbsp;</div>
<div class="overlayBox" style="background-image: url(../images/header.jpg)" >

    <div class="overlayContent">

        <a href="javascript:void()" class="closeLink">Close</a>
        ....

    </div>

</div>

当我点击IE中的关闭链接时，$('.overlayBox').css( 'display', 'none' );行有效，但bgcover仍在那里，平均$('.bgCover').animate({})行无效。为什么这不适用于IE :(。请帮助。感谢

Answer 1

这可能是hide（）的问题，你可以尝试使用：


$('.bgCover').animate({         //This is not working in IE
        opacity:0
    }, null, null, function() {        
          $(this).attr("style", "display: none"); 
    });

希望有所帮助

Answer 2

修复背景位置

if ($.browser.msie) {

        current = parseInt($header.css("backgroundPositionY"));

} else {

        current = parseInt($header.css("backgroundPosition").split(" ")[1]);

}

重叠修复

showOverlayBox();

if ($.browser.msie) {

    $('.bgCover').css("opacity", 0.5);

} else {

    $('.bgCover').css({

        opacity:0

    }).animate( {

        opacity:0.5,
        backgroundColor:'#000'

    }); //end of animate

}

然后代码开始在两个浏览器上都起作用。我不知道doOverlayOpen（）方法中的animate（）在代码上创建了什么效果，因此事件以及bgCover并没有消失。那么这段代码至少对我有用。感谢

动画在IE中不起作用，但在firefox中工作

2 个答案: