well i am still new to js/programming.
can anyhow guide me on how can i optimize my code?
i am sure that there are multiple ways to write a small and fast code that does the same thing.
$('.ourservices-content .left ul li:nth-child(1)').click(function(){
$('.our-services-content-box > ul.box').stop().animate({
marginLeft: '0px'
},800)
})
$('.ourservices-content .left ul li:nth-child(2)').click(function(){
$('.our-services-content-box > ul.box').stop().animate({
marginLeft: '-600px'
},800)
})
$('.ourservices-content .left ul li:nth-child(3)').click(function(){
$('.our-services-content-box > ul.box').stop().animate({
marginLeft: '-1200px'
},800)
})
$('.ourservices-content .left ul li:nth-child(4)').click(function(){
$('.our-services-content-box > ul.box').stop().animate({
marginLeft: '-1800px'
},800)
})
$('.ourservices-content .left ul li:nth-child(5)').click(function(){
$('.our-services-content-box > ul.box').stop().animate({
marginLeft: '-2400px'
},800)
})
$('.ourservices-content .left ul li:nth-child(6)').click(function(){
$('.our-services-content-box > ul.box').stop().animate({
marginLeft: '-3000px'
},800)
})
$('.ourservices-content .left ul li:nth-child(7)').click(function(){
$('.our-services-content-box > ul.box').stop().animate({
marginLeft: '-3600px'
},800)
})
This should do it:
What we’re doing is looping through each element matched by the selector in the original
$()call. Then, for each element matched, we’re adjusting the animation param, marginLeft, by which element index we’re at, starting with the zeroth element.