2010-12-01 3 views
2

J'ai deux fonctions. Comment puis-je faire de ces 2 effets jquery/fonctions: 1 code jquery.Mettez 2 fonctions jquery dans 1 fonction

// 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); 
+0

Décrire ce qui est son but. Pariez que cela pourrait être plus petit – Zlatev

+0

Si vous passez une seule fonction de rappel à la méthode hover(), cette fonction de rappel sera utilisée pour les événements moseenter et mouseleave. Veux-tu çà? –

+0

Dans setInterval, utilisez juste 'listitem' au lieu de' $ (". Landkaart> ul> li") ', utilisez aussi' listitem.first() 'au lieu de' $ (". Landkaart> ul> li: first") ' –

Répondre

0

Je ne sais pas exactement ce que vous voulez, j'ai donc essayé d'optimiser votre code. Si vous faites quelque chose de plus complexe dans la fonction hover, vous pouvez utiliser trigger() à l'intérieur de la minuterie pour appeler la fonction hover (voir les lignes commentées), mais en l'état, il n'est pas vraiment nécessaire de "combiner" le fonctions comme vous demandent (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');