我创建了DIV.cb-toggle,当用户将鼠标悬停在这个div上时,它会动画显示为橙色,当它们悬停在这个div上时,它会动画回灰色,当用户点击此div时,它会动画为蓝色,告诉它被选中的用户.因此,当它未被选中时,它具有mouseenter mouseleave动画,但是当它被选中时我想要解除这些事件的绑定,我不希望悬停事件在被选中时工作,只有当它没有被选中时才能工作.做我想要完成的事情的最佳方法是什么?我想出了下面的代码,但我很确定这是一种可怕的方式,我不知道该怎么做.非常感谢你的帮助.
我的代码:
$('.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');
});
});
而我正在调用这个绑定:
$(".cb-toggle").bind("click.myfadee", function(){
$(".cb-toggle").mouseenter(function() {
$(this).animate({"background":"orange", "color":"#fff;"});
}).mouseleave(function() {
$(this).animate({"background":"gray", "color":"#fff;"});
});
});
我需要保留背景色动画,它需要淡化.
最佳答案 你应该只使用一个选定的类.另外我建议不要使用你在这里的任何.css()调用.只需使用课程.
$(".cb-toggle").bind("click.myfadee", function(){
$(this).toggleClass('selected');
});
$('.cb-toggle').toggle(function() {
var $this = $(this);
if ( $this.is('.selected') ) {
$this.css({"background":"blue", "color":"#fff;"});
}
}, function() {
var $this = $(this);
if ( $this.is('.selected') ) {
$this.css({"background":"gray", "color":"#fff;"});
}
});