Имейте toggleClass исчезают, но не исчезают

В настоящее время я использую метод toggleClass() с jQuery, и я хотел бы, чтобы класс затухал, но я не хочу, чтобы он исчезал. Я использую атрибут «duration», но учитывая, что это toggleClass, продолжительность одинакова в обоих направлениях. Я не хочу использовать addClass() с постепенным исчезновением и removeClass() без угасания, потому что я чувствую, что код будет слишком длинным и неуправляемым. Я хочу небольшой, простой, удобочитаемый код.Имейте toggleClass исчезают, но не исчезают

Любые идеи?

меня это до сих пор:

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

источник

2013-09-09 Keven

Я предполагаю, что вы используете jquery ui, поскольку 'toggleClass' обычно не имеет длительности. –

Итак, когда вы используете 'ближайшую' функцию, вы проходите через родительские divs, чтобы найти' # word'. Если вы можете навести курсор на '# e' в первую очередь, это должно быть видно. Это означает, что родительский ('# word') также должен быть видимым, что означает, что он не может исчезнуть. –

Я угасаю его. Он исчезает, когда я нависаю над элементом, но исчезает, когда я выхожу. Я не хочу, чтобы он исчезал. – Keven

Этого не существует. Вы можете создать свой собственный:

$.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-09 00:58:22

Несчастливо. Я пытался избежать использования 'removeClass()' и 'addClass()' – Keven

@keven, но таким образом вам нужно использовать его только в плагине, а затем просто используйте его, как вы упомянули всюду в своем коде. –

Нам нужно немного больше информации о вашем HTML структуры, чтобы иметь возможность ответить на этот вопрос. Могли бы вы fork this jsfiddle и показать нам, как у вас установлены ваши элементы html?

Как я уже упоминал в своем комментарии, использование closest на самом деле невозможно. Я предполагаю, что вы искали функции next или prev, а не closest. Если это так, вызов fadeIn не будет работать, если вы фактически не выбрали элемент. Вот как вы можете убедиться, что вы действительно находите элемент правильно, используя closest.

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

Если вы запустите этот код, а результат - пустой массив, селектор - это то, что пошло не так. Если вы возвращаете элемент, который вам нужен, вы находитесь в довольно запутанной ситуации (см. Мой комментарий к вопросу).

EDIT: После получения более четкого понимания, если эффект вы после этого, это код, который в конечном итоге решение проблемы:

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

источник

2013-09-09 01:02:15

См. Мой html выше. – Keven

Я обновил скрипку с помощью своего html: http://jsfiddle.net/5MScN/1/ – Keven

Просто посмотрел следующий и предыдущий в спецификации. Я не хочу влиять на брата. Я хочу повлиять на родителя, поэтому '.parent' может быть наиболее применимым. (Это существует в JQuery, правильно?) – Keven

Это полностью «из коробки» предложение, но я думаю, что это удовлетворяет требованию:

$('#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-09 05:57:37 logic8

Имейте toggleClass исчезают, но не исчезают

ответ

Смежные вопросы