Have toggleClass disappears, but does not disappear

综合技术 2018-01-01

I am currently using the toggleClass()
method with jQuery and I'd like to have the class fade in, but I don't want it to fade out. I've been using the "duration" attribute, but given that it is toggleClass, the duration is the same both ways. I don't want to use addClass()
with a fade in and removeClass()
without a fade out because I feel like the code will get too lengthy and unruly. I want small, simple, readable code.

Any ideas?

I have this so far:

$("#e" ).hover(function() {
    $(this).closest("#word").toggleClass("hoverE", 500 )
});

I would like something like this where I can specify fade in duration and fade out duration:

$("#e" ).hover(function() {
    $(this).closest("#word").toggleClass("hoverE", 500, 0 )
});

I've tried something like this, but it doesn't work:

$("#e" ).hover(function() {
    $(this).closest("#word").toggleClass("hoverE").fadeIn(500)
});

HTML:

H

E

L

L

O

This doesn't exist. You could create your own:

$.fn.myToggleClass = function(className, showDur, hideDur) {
    if(this.hasClass(className)){
        this.removeClass(className, hideDur);
    } else {
        this.addClass(className, showDur);
    }
};

http://jsfiddle.net/6QqYQ/

您可能感兴趣的

JavaScript 开发人员需要知道的简写技巧 本文来源于多年的 JavaScript 编码技术经验,适合所有正在使用 JavaScript 编程的开发人员阅读。 本文的目的在于帮助大家更加熟练的运用 JavaScript 语言来进行开发工作。 文章将分成初级篇和高级篇两部分,分别进行介绍。 初级篇 1、三目运...
Is it possible to let a user modify elements of an... Say a user was viewing a webpage with some content like some text Is there any way to allow them to change the contents to new text and commit...
Strange behavior when setting the PHP value in the... I have the below code in my page:if (navigator.userAgent.indexOf('MSIE 8') != -1) { alert(); }Now this will correct...
Channels using async and await asyncand await are, I think, the best thing to happen to Javascript, though I’d very much like something like sweet.js so I can invent it wh...
15 Web APIs you’ve never heard of There is a huge number of web APIs available and sometimes as a web developer it can be hard to keep track of new ones. So we've helpfully collated a ...