让toggleClass淡入但不淡出

Question

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:

  <div id="word">
    <h1><a id="h" class= "letter" href=#>H</a></h1>
    <h1><a id="e" class= "letter" href=#>E</a></h1>
    <h1><a id="l" class= "letter" href=#>L</a></h1>
    <h1><a id="l2"class= "letter" href=#>L</a></h1>
    <h1><a id="o" class= "letter" href=#>O</a></h1>
  </div>

Answer 1

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/

Answer 2

This is completely an 'out of the box' suggestion, but I think it fulfills the requirement:

$('#e').toggleClass( "hoverE", ( $('#e').hasClass("hoverE") ? 0 : 500) );

( or ) it would be a better idea to put it in a function:

function customToggleClass($el, classname, dur1, dur2){

    dur = $el.hasClass(classname) ? dur2 : dur1;
    $el.toggleClass(classname, dur);

    return $el;

}

call it like:

customToggleClass( $("#e"), "hoverE", 500, 0 );

( OR again ) even better as a jQuery plugin:

$.fn.toggleClassFade = function(classname, dur1, dur2) {
    $.each(this, function(i, el){
        var $el = $(el);
        var dur = $el.hasClass(classname) ? dur2 : dur1;
        $el.toggleClass(classname, dur);
    });

    return this;
};

used like:

$('#e').toggleClassFade('hoverE', 500, 0)

(it's also chainable)

hope this helps.

Answer 3

We need a little more information about your html structure to be able to answer this question. Could you fork this jsfiddle and show us how you have your html elements set up?

Like I mentioned in my comment, using closest isn't actually possible here. My guess is that you were looking for the next or prev functions rather than closest . If this is the case, the fadeIn call wouldn't work if you were not in fact selecting an element. Here's a way that you can verify that you are in fact finding an element correctly using closest .

$("#e" ).hover(function() {
    console.log($(this).closest("#word")[0])
});

If you run this code and the result is an empty array, the selector is what went wrong. If you are getting back the element you are after, you are in quite a confusing situation (refer to my comment on the question).

EDIT: After getting a clearer understanding if the effect you were after, this is the code that ended up solving the problem:

http://jsfiddle.net/5MScN/5/