Not sure if this is jQuery or not, but can you help or point me in the right direction?
Hi,
So I work for a company called Force Four, and I work in the studio. We outsourced our site a few years ago to be re done, and now we would like to update a few bits, but without the budget to outsource. I have been asked to work on updating the site.
One of the jobs is to make the slider at the top of our site more interactive (see
www.f4group.com ). At the moment the slider works when the user hovers over each category, and each category expands. What we would like is the animation to happen on its own, kind of how a slider works. Imagine scrolling the mouse cursor over the tabs from left to right very slowly like a timeline. We would like this for when the user visits our site.
Anyway this is the JS code I have, I have no idea if this is based off using jQuery or not. If so can anyone give me an idea on how to embed this code to work.
- $(function(){
$('.headline').each(function(){
var pattern = /[0-9]+/;
var index = $(this).attr('id').match(pattern);
var frame = $('#s' + index + 'frame');
var frameOrgPos = frame.position();
var frameOrgWidth = frame.width();
var image = $('#s' + index + 'image');
var imageOrgPos = image.attr('orgpos');
$(this).hover(
function(){
$('.frame').css('z-index','1');
frame.css('z-index','10');
frame.filter(':not(:animated)').animate({ width: '960px', left: '0px'}, 360);
image.filter(':not(:animated)').animate({ left: '0px'}, 360);
},
function(){
frame.animate({ width: frameOrgWidth + 'px', left: frameOrgPos.left + 'px'}, 360);
image.animate({ left: '-' + imageOrgPos + 'px'}, {duration: 360, complete: function(){frame.css('z-index','1'); }});
}
);
});
});