让toggleClass淡入但不淡出

Question

我目前在jQuery中使用toggleClass()方法，但我希望该类淡入，但我不希望它淡出。 我一直在使用“ duration”属性，但是鉴于它是toggleClass，所以两种方式的持续时间都相同。 我不想用addClass()与和淡入removeClass()没有淡出，因为我觉得自己的代码会得到过于冗长和不羁。 我想要小的，简单的，可读的代码。

有任何想法吗？

到目前为止，我有：

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

我想要这样的东西，我可以指定淡入时间和淡出时间：

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

我已经尝试过类似的方法，但是它不起作用：

$("#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

这个不存在。 您可以创建自己的：

$.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

这完全是“开箱即用”的建议，但我认为它可以满足要求：

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

（ 或 ）最好将其放在函数中：

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

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

    return $el;

}

像这样称呼它：

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

（ 或再次使用 ）作为jQuery插件更好：

$.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;
};

像这样使用：

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

（也可链接）

希望这可以帮助。

Answer 3

我们需要有关您的html结构的更多信息，才能回答此问题。 您能分叉这个jsfiddle并向我们​​展示如何设置html元素吗？

就像我在评论中提到的那样，这里实际上不可能使用closest值。 我的猜测是，你正在寻找next或prev函数，而不是closest 。 在这种情况下，如果您实际上未选择元素，则fadeIn调用将不起作用。 您可以通过以下方式验证您实际上是否使用closest正确找到了元素。

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

如果运行此代码，结果是一个空数组，则选择器出了问题。 如果您要找回要处理的要素，那么您的处境就很混乱（请参阅我对这个问题的评论）。

编辑：在更清楚地了解您所追求的效果之后，这是最终解决问题的代码：

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