1

我的图像动画在最新的 chrome 和 firefox 中无法正常工作，但在 IE8 和最新的 Opera 中运行良好

http://jsfiddle.net/wzHx3/7/和全屏示例http://dev.fama.net.pl/tides/ - 单击右侧三角形触发动画，然后单击左侧触发第二个动画片

更新 - Chrome 中的第二个动画现在已修复为 afshin

更新 2 - 所有 Chrom 问题都已修复至 afshin

ISSUE - Firefox：第一个动画比其他浏览器中的动画短，第二个动画之前是向右大跳转

Chrome、IE8 和 Opera 完美运行

查询

$(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);
});

jsFiddle

于 2012-10-08T10:52:37.723 回答