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 );

（ OR再次）作为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结构的信息才能回答这个问题。你可以fork this jsfiddle向我们展示你如何设置你的html元素吗？

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

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

如果运行此代码并且结果为空数组，则选择器出错。如果你要回到你所追求的元素，你会处于相当混乱的状态（参考我对这个问题的评论）。

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

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

让toggleClass淡入但不淡出

3 个答案: