I have two functions. How can i make from this 2 jquery effects / functions: 1 jquery code.
// Function 1. For hover over the .landkaart
var hover = false;
$(".landkaart > ul > li > a").hover(function () {
if ( hover == true ) {
$(this开发者_如何转开发).closest("li").removeClass('open');
hover = false;
} else {
$(".landkaart ul li .pijl").hide();
$(this).closest("li").addClass('open');
console.log(this);
$(".pijl").show();
hover = true;
}
});
// Interval for the .landkaart
var listitem = $(".landkaart > ul > li"),
len = listitem.length,
index = 0;
$(".landkaart > ul > li:first").addClass('open');
setInterval(function () {
$(".landkaart > ul > li").removeClass('open');
if ( (index + 1) >= len ) {
index = 0;
$(".landkaart > ul > li:first").addClass('open');
} else {
listitem.eq(index).next().addClass('open');
}
index++;
}, 5000);
I'm not sure exactly what you want, so I tried to optimize your code.
If you do something more complex in the hover function, you can use trigger()
inside the timer to call the hover function (see commented out lines), but as it stands there really isn't a need to "combine" the functions like you are asking (demo):
CSS
.pijl { display: none; }
.open a { color: #f00; }
.open .pijl { display: inline-block; }
Script
// Interval for the .landkaart
var listitem = $(".landkaart li"),
len = listitem.length,
index = 0,
timer = setInterval(function() {
index = (index + 1) % len;
// use trigger to simulate a mouseenter and activate the hover event
// listitem.eq(index).trigger('mouseenter');
// but it might be better to just do this:
listitem.removeClass('open').eq(index).addClass('open');
}, 5000);
listitem
.hover(function() {
listitem.removeClass('open');
$(this).addClass("open");
})
.eq(0).addClass('open');
精彩评论