Hi I am trying to get this script to show random colours one after the other when the li scrolls up but so far I have it doing this but it is not smooth it changes when it restarts so you dont get smooth effect and it changes colour twice any help will be great thanks.
$("#carousel ul").animate({marginTop:-100},2000,function(){
function pad(s,i,c,r){
i=i+1-s.length;
if(i<1)return s;
c=new Array(i).join(c||" ");
return r?s+c:c+s;
};
hue = "#"+pad((Math.random()*0x1000000<<0).toString(16),6,"0");
hue2 = "#"+pad((Math.random()*0x1000000<<0).toString(16),6,"0");
hue3 = "#"+pad((Math.random()*0x1000000<<0).toString(16),6,"0");
$(this).find("li:last").after($(this).find("li:first"));
$('#div1').css({backgroundColor: hue});
$('#div2').css({backgroundColor: hue2});
$('#div3').css({backgroundColor: hue3});
$(this).css({marginTop:0});
})
},1000);
});
my example can be found here http://swipedstudio.com/jtoy/ Thanks in advance!
Working code:
var t = setInterval(function(){
$("#carousel ul").animate({marginTop:-100},2000,function(){
function pad(s,i,c,r){
i=i+1-s.length;
if(i<1)return s;
c=new Array(i).join(c||" ");
return r?s+c:c+s;
};
hue = "#"+pad((Math.random()*0x1000000<<0).toString(16),6,"0");
$(this).find("li:last div").css({backgroundColor: hue});
$(this).find("li:last").after($(this).find("li:first"));
$(this).css({marginTop:0});
})
},1000);
The issues:
$(li:last div)
because the three divs cycle through the list. When you select div1, div2, or div3 specifically, it could be at any place in the list$(li:last div)
selector) needed to take place prior to the after()
statement. Your original code changes the order of the divs and then changes the color