1

最新の chrome と firefox で正しく動作しない画像のアニメーションがあり、IE8 と最新の Opera では正常に動作しています

http://jsfiddle.net/wzHx3/7/およびフルスクリーンの例http://dev.fama.net.pl/tides/ - 右の三角形をクリックしてアニメーションをトリガーし、左の三角形をクリックして 2 番目のトリガーをトリガーしますアニメーション

更新 - Chrome の 2 番目のアニメーションが afshin に修正されました

更新 2 - すべての Chrom の問題は thx から afshin に修正されました

問題 - Firefox: 最初のアニメーションが他のブラウザのアニメーションよりも短く、2 つ目のアニメーションの前に右への大きなジャンプがある

Chrome、IE8、Opera は完璧に動作します

Jクエリ

$(window).load(function(){

    var speed = 500;
    var times = 2;
    var loop = setInterval(anim, 500);
    function anim(){
        times--;
        if(times === 0){clearInterval(loop);}
        $('#arrow-right').animate({right:-1,opacity:.2},speed).animate({right:-15, opacity:.5},speed);
    }
    anim(); 

    $('#bg img.pic').css('opacity','0');
});
$(document).ready(function(){

    var easing = 'easeInOutCubic';

$('#arrow-right').click(function(){
    $('#bg img.pic').animate({left:'0%', opacity: 1}, 2500, function() {
        $('#arrow-left').animate({left:0}, 800, easing);
    });
    $(this).animate({right:-125}, 800, easing);

});    

$('#arrow-left').click(function(){
    $('#bg img.pic').animate({left: '20%', opacity: 0}, 2500, easing, function() {
        $('#arrow-right').animate({right:-15}, 800, easing);
        //$(this).css('left','75%');
    });        
    $(this).animate({left:-125}, 800, easing);
});
});

CSS

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body,html {
    overflow: hidden
}
#bg {
    position:fixed; 
    top:-50%; 
    left:-50%; 
    width:200%; 
    height:200%;
}
#bg img {
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    margin:auto; 
    min-width:50%;
    min-height:50%;
}
#bg img.blank {
    z-index: 0;
}
#bg img.pic {
    z-index: 1;
    left: 20%;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.arrow {
    position: absolute;
    top: 50%;
    margin-top: -120px;
    width: 0;
    height: 0;
    opacity:.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    cursor: pointer;
    border-top: 120px solid transparent;
    border-bottom: 120px solid transparent;         
}
.arrow:hover {
    opacity:.2 !important;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)" !important;
}
#arrow-left {
    border-left: 120px solid #83bedd;
    left: -125px;
    z-index: 2;
}
#arrow-right {
    border-right: 120px solid #83bedd;
    right: -15px;
    z-index: 2;
}

HTML

<div id="bg">
    <img class="blank" src="http://dev.fama.net.pl/tides/img/bg.jpg" alt="" />
    <img class="pic" src="http://dev.fama.net.pl/tides/img/bga.jpg" alt="" />
</div>

<div id="arrow-left" class="arrow"></div>
<div id="arrow-right" class="arrow"></div>
4

1 に答える 1

0

これをチェックしてください

$('#arrow-right').click(function(){
    $('#bg img.pic').animate({left:'0%', opacity: 1}, 2500, function() {
        $('#arrow-left').animate({left:0}, 800, easing);
    });
    $(this).animate({right:-125}, 800, easing);

});    

$('#arrow-left').click(function(){
    $('#bg img.pic').animate({left: 20+'%', opacity: 0}, 2500, easing, function() {
        $('#arrow-right').animate({right:-15}, 800, easing);
        //$(this).css('left','75%');
    });        
    $(this).animate({left:-125}, 800, easing);
});

jsフィドル

于 2012-10-08T10:52:37.723 に答える