私は次の機能を持っています:
$("#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 またはどのバージョンでも動作しません。fadeTo()をfadeIn()とfadeOut()に置き換えてみましたが、うまくいきませんでした。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 では問題が発生しています。