How do I use jQuery to infinitely add then remove a CSS class on a set of 4 li's.
Basically, see this simple fiddle (without any jquery): /
I want to cycle through the boxes to change the css of a box, flip back to original css, then go on to the next one etc etc...
Any help appreciated!
How do I use jQuery to infinitely add then remove a CSS class on a set of 4 li's.
Basically, see this simple fiddle (without any jquery): http://jsfiddle/kHsvN/
I want to cycle through the boxes to change the css of a box, flip back to original css, then go on to the next one etc etc...
Any help appreciated!
Share Improve this question edited Oct 8, 2012 at 14:19 Darren 70.8k24 gold badges141 silver badges145 bronze badges asked Oct 3, 2012 at 8:39 Ben DavisBen Davis 511 silver badge2 bronze badges 2- As far as I understand this, at any given time there should be one box having the class? – bardiir Commented Oct 3, 2012 at 8:54
- @Ben Davis, Check my updated answer/fiddle. – The Alpha Commented Oct 3, 2012 at 11:52
4 Answers
Reset to default 2$(document).ready(function() {
window.setInterval(function() {
$("#topboxesmenu li a").each(function() {
$(this).css("background", get_random_color());
});
}, 1000);
});
function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
}
This example uses a random colour, but could easily be changed to .addClass() in the .each part.
JS Fiddle (Live Example)
http://jsfiddle/kHsvN/6/
Random color generator in JavaScript
Try this:
jQuery(document).ready(function() {
window.setInterval(function() {
var oldBox = jQuery('#topboxesmenu li.active');
if(oldBox.length == 0 || oldBox.next().length == 0)
{
oldBox.removeClass('active');
jQuery('#topboxesmenu li:first-child').addClass('active');
}
else
oldBox.removeClass('active').next().addClass('active');
},2000);
});
It will cycle through the boxes, adding an active class to them one after the other.
http://jsfiddle/gKEmL/
You may try this
CSS For current item, class to be added/removed
ul#topboxesmenu li a.current{ background:black }
JS
$('#topboxesmenu li a').each(function(i){
var t=$(this);
setTimeout(function(){
t.addClass('current');
setTimeout(function(){
t.removeClass('current');
}, 1000);
}, 1100*i);
});
DEMO
Update: For continuous loop
$(function(){
loopIt();
});
function loopIt(){
$('#topboxesmenu li a').each(function(i){
var t=$(this);
setTimeout(function(){
t.addClass('current');
setTimeout(function(){
t.removeClass('current');
if(i==$('#topboxesmenu li a').length-1) loopIt();;
}, 1000);
}, 1100*i);
});
}
DEMO.
I think this is doing what you want:
el = $('#topboxesmenu li:first-child');
setInterval(function() {
el = window.el;
el.siblings().children('a').css('background','#ff0000');
el.children('a').css('background-color', 'blue');
el = el.next().length ? el.next() : el.parent().children('li:first-child');
}, 1000);
See working demo
UPDATE:
Regarding your test page don't working, you have your javascript outside the body tag, try putting your </body> tag just before the </html> tag. You currently have this:
</body>
<script type="text/javascript" ....
...
...
</html>
UPDATE 2:
Also your jquery script tag :
<script type="text/javascript" src="http://code.jquery./jquery-1.7.1.js"></script>
should be placed inside the <head> of your page, not the body where you currently have it.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744276013a4566333.html
评论列表（0条）