jquery - animate two elements with one action
I am trying to create a parallax effect where images slide over a
background, and the background moves too, but only very slightly. Is that
possible with jQuery? I tried referencing both elements by ID with the
animation but that isn't working.
$(document).ready(function() {
var timer;
$("#leftarrow").hover(function() {
timer = setInterval(function() {slideLeft();}, 50);
}, function() {
clearInterval(timer);
});
$("#rightarrow").hover(function() {
timer = setInterval(function() {slideRight();}, 50);
}, function() {
clearInterval(timer);
});
function slideLeft() {
$("img#background").stop().animate({
'left': '-=200px'
}, 50);
$(".mid").stop().animate({
'left': '-=20px'
}, 50);
}
function slideRight() {
$("img#background").stop().animate({
'left': '-=200px'
}, 50);
$(".mid").stop().animate({
'left': '+=20px'
}, 50);
}
});
Here is a fiddle: http://jsfiddle.net/rYYDv/
Thank you for your help.
No comments:
Post a Comment