jefSofeZemy
New Member
i have animation of image which is not working correctly in latest chrome and firefox and it's working fine in IE8 and latest Operahttp://jsfiddle.net/wzHx3/ and the full screen examplehttp://dev.fama.net.pl/tides/ - click on the right triangle to trigger animation and than click on the left one to trigger second animationin Chrome first animation is to short and the second one is preceded by little jump to the leftin Firefox first animation is ok but second one is preceded by big jump to the rightIE8 and Opera works perfectJQUERY\[code\]$(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:-1, opacity: 1}, 2500, easing, function() { $('#arrow-left').animate({left:-15}, 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); }); /* var img = $("<img class='pic' />").attr('src', 'http://dev.fama.net.pl/tides/img/bga.png') .load(function() { if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { alert('broken image!'); } else { $("#bg").append(img); } }); */});\[/code\]CSS\[code\]* { -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
XImageTransform.Microsoft.Alpha(Opacity=0)";}.arrow { position: absolute; top: 50%; margin-top: -120px; width: 0; height: 0; opacity:.5; -ms-filter: "progidXImageTransform.Microsoft.Alpha(Opacity=50)"; cursor: pointer; border-top: 120px solid transparent; border-bottom: 120px solid transparent; }.arrow:hover { opacity:.2 !important; -ms-filter: "progidXImageTransform.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;}\[/code\]HTML\[code\]<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>\[/code\]
XImageTransform.Microsoft.Alpha(Opacity=0)";}.arrow { position: absolute; top: 50%; margin-top: -120px; width: 0; height: 0; opacity:.5; -ms-filter: "progidXImageTransform.Microsoft.Alpha(Opacity=50)"; cursor: pointer; border-top: 120px solid transparent; border-bottom: 120px solid transparent; }.arrow:hover { opacity:.2 !important; -ms-filter: "progidXImageTransform.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;}\[/code\]HTML\[code\]<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>\[/code\]