【问题标题】:JQuery.ajax succes function fadeTo not working in IE 10JQuery.ajax 成功函数fadeIn 在 IE 10 中不起作用
【发布时间】:2024-04-15 08:10:01
【问题描述】:

我有以下功能:

   $("#home").click(function(){
   if ($(this).hasClass('activeLink')) {
   return false;
   }
   $('.menu a').removeClass('activeLink');
   $(this).addClass('activeLink');
   $('.sidebar').click();
   var home = 'ok';

   //Send request to home.php
   $.ajax({
    type: 'POST',
    url:  'home.php',
    data: {
    home: home
    },
success: function(data) {
    $page.fadeTo(1000, 0, 'easeOutSine',function(){
        $(this).delay(500).html(data).fadeTo(1000,1,'easeOutSine');
    });
},
error: function(){
    alert('error');
    }
});
    return false;
}); //end home.click

代码在 Mozilla 和 Chrome 中运行良好,但 fadeTo 在 IE 10 或任何版本中无法运行。我尝试用fadeIn() 和fadeOut() 替换fadeTo(),但这并没有帮助。我尝试用 JQuery 改变不透明度,仍然没有。请求返回的html如下:

<div class="home">
    <div class='overlay'>
    </div>
</div>

CSS 是:

.page {
    display: block;
    width:100%;
    max-width:100%;
    height:100%;
    max-height:100%;
    color:#FFF;
    background-repeat:no-repeat;
    background-position:center center;
    background-attachment:fixed;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
}

.home {
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: url('../images/background1.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.overlay {
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: url('../images/pattern.png');
    background-repeat: repeat;
}

我尝试在一个单独的函数中移动淡入淡出的东西,结果还是一样。任何帮助将不胜感激。

编辑:当我将选择器从 $page = $(".page");$('.page div').fadeTo(...) 我不得不添加另一个 div。如果我直接选择.page,它不起作用。没关系, 这终于在 IE 中起作用了。效果平滑淡出,淡入非常迅速,不像它在 Chrome 和 Firefox 中的表现。但是,我要和它一起去。奇怪的是,在 IE 9 模式下效果可以正常工作 - IE 10 遇到问题。

【问题讨论】:

    标签: jquery ajax internet-explorer-10


    【解决方案1】:

    你必须改变

    success: function(data) {
        $page.fadeTo(1000, 0, 'easeOutSine',function(){
    

    去别的地方……

    例如

    success: function(data) {
        $(this).fadeTo(1000, 0, 'easeOutSine',function(){
    

    success: function(data) {
        $(document).fadeTo(1000, 0, 'easeOutSine',function(){
    

    或任何现有元素....目前它找不到对您的脚本无关的“$page”

    【讨论】:

    • 对不起,你实际上也可以做 $.page
    • $page 定义在函数上方,是对 .page 类元素的引用