Put 2 jquery functions in 1 function -
i have 2 functions. how can make 2 jquery effects / functions: 1 jquery code.
// function 1. hover on .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 .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 want, tried optimize code.
if more complex in hover function, can use trigger()
inside timer call hover function (see commented out lines), stands there isn't need "combine" functions asking (demo):
css
.pijl { display: none; } .open { color: #f00; } .open .pijl { display: inline-block; }
script
// interval .landkaart var listitem = $(".landkaart li"), len = listitem.length, index = 0, timer = setinterval(function() { index = (index + 1) % len; // use trigger simulate mouseenter , activate hover event // listitem.eq(index).trigger('mouseenter'); // might better this: listitem.removeclass('open').eq(index).addclass('open'); }, 5000); listitem .hover(function() { listitem.removeclass('open'); $(this).addclass("open"); }) .eq(0).addclass('open');
Comments
Post a Comment