Question

我试图在我的网站上实现简单的JQuery Fadein/Fadeout。所以我已经完成了这些步骤

JQUERY

<script type="text/javascript">
    $(document).ready(function() {          
    $(".writereview").click(function(){

        $(".reviewpopup").fadeIn();
        $(".popupcontainer").fadeIn();

    });


    $(".popupclose").click(function(){

        $(".reviewpopup").fadeOut();
        $(".popupcontainer").fadeOut();

    });

    });

    </script>

HTML

   <div class="reviewpopup" style="display: none; "></div>
   <div class="popupcontainer" style="display: none; ">
   <iframe src="feedback.html" frameborder="0" scrolling="no" width="475" height="510">               </iframe>
    <a href="#" class="popupclose"><img src="images/popupclose.jpg" alt="HoHo"></a> </div>

CSS

.reviewpopup {

    display:none;
    width:100%;
    height:100%;
    overflow:hidden;
    background-color:#000;
    opacity:0.5;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
    filter: alpha(opacity=50);              
    position:fixed;
    top:0;
    z-index:1001;   
        }

        .popupcontainer {
    width: auto;
    height:auto;
    display:none;
    position:absolute;
    top: 45px;
    left: 50%;
    margin-left: -280px;
    background-color:#FFF;
    z-index:1001;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border:solid 5px #000;
    padding:20px;
         }

JQuery 在所有浏览器中运行良好，但问题是Opacity is not working properly in IE8。我只是删除了Jquery，它的工作原理。我不知道这个 IE8 Opacity 和Jquery的确切原因是什么。请帮我。

Answer 1

fadeIn()会覆盖CSS filter值，因此当您在部分不透明度元素上调用fadeIn时，您应该重置回调中的值：

var pop = $('.reviewpopup'),
    filter = pop.css('filter'); // fadeIn overrides filter value in IE8; reset it
pop.fadeIn(function() {
    if (filter) pop.css('filter', filter);
});

添加简单Jquery Fadein / Fadeout时IE8中的不透明度问题

1 个答案: