Hello I would like to create a zoom like animation on my page which is working util you do not resize the window because after resize everything gets messy 🙂 .
The concept is: when you click on a link which assigned to the .click() function than with animation the left and right side of the page slides out and the middle section becomes “fullscreen” and if you click exit then left and right slides back in.
The problem with my current code is after you resized the browser and you click one of the buttons than it creats an extra effect or simply the image size animation is running after the conatiner’s animaton is finished.
And I’m stuck, I have no idea how to make it so smooth like before window resize.
in code the layout looks like this:
<!doctype html>
<html>
<head>
<style>
html, body {height:100%; padding:0; margin:0; overflow:hidden;}
#left{width:400px; height:100%; position:absolute; left:0; top:0; overflow:hidden;}
#right{width:200px; height:100%; position:absolute; right:0; top:0; overflow:hidden;}
#center{height:100%; position:absolute; left:400px; right:200px; top:0; overflow:hidden;}
</style>
</head>
<body>
<div id="left"></div>
<div id="center">
<a href="#" onClick="return false;" class="zoom">Fullscreen</a>
<a href="#" onClick="return false;" class="downsize">Exit</a>
<img src="img.jpg" />
</div>
<div id="right"></div>
</body>
</html>
and the jQuery code now looks like this:
function resizeE(){
var wWidth = $(window).width();
var wHeight = $(window).height();
var cWidth = $('#center').width();
var cHeight = $('#center').height();
var iWidth = $('#center img').width();
var iHeight = $('#center img').height();
var calcWidth = wHeight*1.7777;
var iMargin = (cWidth-calcWidth)/2;
var c2Width = wWidth-600;
var i2Margin = (c2Width-calcWidth)/2;
var posLeft = $('#center').position().left;
if(posLeft == '400'){
$('#center img').css({'height': wHeight+'px', 'width': calcWidth+'px', 'margin-left': iMargin+'px'});
}else{
$('#center img').css({'width': wWidth+'px', 'height': (wWidth/1.7777)+'px', 'margin-left': '0'});
}
$('.zoom').click(function(){
$('.downsize').fadeIn('fast');
$('#center img').animate({width: wWidth+'px', height: (wWidth/1.7777)+'px', marginLeft:'0'}, 1200);
$('#center').animate({left: '0', right: '0'}, 1200);
$('#left').animate({marginLeft:'-400px'}, 1200);
$('#right').animate({marginRight:'-200px'}, 1200);
});
$('.downsize').click(function(){
$('.downsize').fadeOut('fast');
$('#center img').animate({width: calcWidth+'px', height: wHeight+'px', marginLeft: i2Margin+'px'}, 1200);
$('#center').animate({left: '400px', right: '200px'}, 1200);
$('#left').animate({marginLeft:'0'}, 1200);
$('#right').animate({marginRight:'0'}, 1200);
});
}
jQuery(document).ready(function($) {
$('.downsize').hide();
resizeE();
$(window).resize(resizeE);
});
It looks like the problem is you’re adding a new click event every time you resize the browser. If you unbind the old click events at the top of
resizeEit works. Here’s an updated fiddle link.Two lines added to the top of
resizeEKeep in mind when you bind events via jQuery, such as
.click, it doesn’t overwrite any previous events.