2

我目前正在使用toggleClass()jQuery 的方法，我想让类淡入，但我不希望它淡出。我一直在使用“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>
4

3 回答 3

3

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

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

http://jsfiddle.net/6QqYQ/

于 2013-09-09T00:58:22.747 回答
1

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

$('#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)

（它也可以链接）

希望这可以帮助。

于 2013-09-09T05:57:37.163 回答
0

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

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

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

如果您运行此代码并且结果是一个空数组，则选择器出了问题。如果您要找回您所追求的元素，那么您将处于相当混乱的境地（请参阅我对这个问题的评论）。

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

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

于 2013-09-09T01:02:15.713 回答