2010-09-21 4 views
1

J'ai créé DIV.cb-toggle, quand l'utilisateur survole cette div, il s'anime à Orange, quand il passe la souris dessus div, il s'anime en gris, lorsque l'utilisateur clique sur cette div, il s'anime en bleu, indiquant à l'utilisateur qu'il a été sélectionné. Donc, quand il n'est pas sélectionné, il a des animations mouseeleave, mais quand il est sélectionné, je ne veux pas que l'événement hover fonctionne quand il a été sélectionné, seulement quand il n'est pas sélectionné. Quelle est la meilleure façon de faire ce que j'essaie d'accomplir? Je suis venu avec le code ci-dessous, mais je suis sûr que c'est une façon horrible de le faire et je ne sais pas quoi faire. merci beaucoup pour toute aide.Jquery - lier/déconnecter un script de vol stationnaire, petit bout de code, je ne sais pas quoi faire

mon code:

$('.cb-toggle').toggle(function() { 
     $(this).animate({"background":"blue", "color":"#fff;"});  
     $(".cb-toggle").unbind("click.myfadee"); 
    }, function() { 
     $(this).animate({"background":"gray", "color":"#fff;"}); 
     $('.cb-toggle').trigger('mouseenter'); 
    }); 
}); 

et je vous appelle ce bind:

$(".cb-toggle").bind("click.myfadee", function(){ 
     $(".cb-toggle").mouseenter(function() { 
     $(this).animate({"background":"orange", "color":"#fff;"}); 
    }).mouseleave(function() { 
     $(this).animate({"background":"gray", "color":"#fff;"}); 
    }); 
}); 

J'ai besoin de garder l'animation de couleur de fond, et je ne suis pas en utilisant l'interface utilisateur jquery donc je ne peux pas animer entre les cours.

Répondre

2

Vous savez, avec un peu de CSS, cela pourrait être réalisé facilement.

CSS

.cb-toggle { 
    background-color: gray; 
    color: #fff; 
} 
.cb-toggle:hover { 
    background-color: orange; 
} 
.cb-toggle.selected { 
    background-color: blue; 
} 

HTML

<a href="#" class="cb-toggle">Toggle This</a>​ 

jQuery

$('.cb-toggle').click(function() { 
    $(this).toggleClass('selected'); 
});​ 

demo

c'est juste un exemple, vous pouvez l'étendre à faire votre animation. Vous voudrez peut-être ce link trop

With animation demo

+0

Wow, mec, tu juste allé au-delà. Et jsfiddle est vraiment rock. – Unoti

+0

[deuxième exemple de mise à jour] (http://jsfiddle.net/ehBDt/2/);) – Reigel

Questions connexes