iam trying to create a smotth transition between 3 images inside a div using jquery. i have managed to get the needed opacity transition on moving mouse to any side of the div.Now i want to have some change in position also like this Click Here
But iam changing the left css propery but keeps on changing and doesnt stop.
html code is
<head>
<meta charset="utf-8" />
<title>testing sliding animation</title>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script src="scripts/slider.js"></script>
<link rel="stylesheet" type="text/css" href="style/main.css">
<link rel="stylesheet" type="text/css" href="style/slide.css">
</head>
<body>
<div id="header">
</div><div id="slider" >
<div id="imagecontainer">
<img class="portrait" id = "img1" src = "images/cropp1.png">
<img class="portrait" id = "img2" src = "images/cropp1-2.png" >
<img class="portrait" id = "img3" src = "images/cropp2.png">
</div>
</div><div id="footer">
</div>
</body>
css code
#slider{
position:relative;
width:100%;
height:100%;
background:#FFF;
margin:0;
padding:0;
}
#slider .portrait{
display:block;
height:500px;
width:453px;
position:absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding:0;
}
#slider #img1{
z-index:1;
}
#slider #img2{
z-index:2;
}
#slider #img3{
z-index:3;
}
javascript code is
$(function(){
var $win = $(window),
w = 0,h = 0,
opacity = 1,
getWidth = function() {
w = $win.width();
h = $win.height();
};
$win.resize(getWidth).mousemove(function(e) {
opacity = (e.pageX/w)*2;
$("#img1").css({'opacity':function(){
if(e.pageX<(w/2))
return 1;
else
return 0;//2-opacity;
}
});
$("#img2").css({'opacity':function(){
if(e.pageX<(w/2))
return opacity;
else
return 1;//2-opacity;
}
});
$("#img3").css({'opacity':opacity-1});
$("#slider").animate({left:'+=' + e.pageX + 'px'},"slow","easeout");
}).resize();
});