Jquery toggleclass fade работает с одним классом, а не с другим?

Я хочу, чтобы мои элементы i теряли класс outline при наведении, но по какой-то причине это не работает. Класс теряется и добавляется снова мгновенно без затухания / задержки. Если я попробую тот же самый код с классом background, то он действительно сработает. Что я здесь не вижу?

Вторая проблема заключается в том, что когда я пробую это с классом background, фон остается там на время затухания (в данном случае 500 мс), а затем мгновенно исчезает. Это также должно быть постепенным исчезновением.

Спасибо!

JSFiddle

$('nav a').hover(function(){
  if (!$(this).find("i").hasClass("home")){
    $(this).find('i').toggleClass('outline', 500);
    }
})

Второй параметр для toggleClass - это state, который должен быть значением Boolean. api.jquery.com/toggleclass

Titus 11.04.2018 13:36
0
1
61
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

.hover() можно передать 2 функции в качестве аргументов. Первый похож на .mouseover(), а второй - на .mouseout().

$('nav a').hover(function() {
  $(this).find('.home').removeClass('outline');
}, function() {
  $('.home').addClass('outline');
})

Обновлять

Вы можете добавить эффект затухания и затухания без Javascript, только с помощью css:

nav {
    font-size: 20 px;
}
nav a {
    padding-left: 30 px;
}
nav a i {
    position: absolute;
    left: 0;
}
nav a i.star: not(.outline) {
    opacity: 0;
    transition: opacity 300 ms ease;
}
nav a: hover.star: not(.outline) {
    opacity: 1;
    transition: opacity 300 ms ease;
}

Демо здесь.

api.jquery.com/addclass и api.jquery.com/removeclass Не уверен, что здесь делает 500
Gerard 11.04.2018 13:39

Это не работает как mouseover и mouseout, поскольку класс не добавляется обратно, когда вы прекращаете наведение. Также нет затухания / задержки, поэтому я не уверен, что это должно исправить. Вы сначала свой код?

Jos van Weesel 11.04.2018 13:41

Как он сказал: я хочу, чтобы мои элементы i теряли класс схемы при наведении курсора. Если я понимаю, когда пользователь наводит курсор на элемент a, он добавляет класс в i, если этот a имеет класс home! : D

Radonirina Maminiaina 11.04.2018 13:41

@ Джерард, странное копирование и вставка! Извините! ;)

Radonirina Maminiaina 11.04.2018 13:47

@RadonirinaMaminiaina Проверьте мою скрипку, она уже делает это, но мне нужно, чтобы она исчезла / появлялась при наведении курсора, а этого нет. Попробуйте заменить свой код на мой в Fiddle, вы увидите, что он не работает.

Jos van Weesel 11.04.2018 13:53

Обновлено с помощью метода перехода css или метода анимации jQuery

Radonirina Maminiaina 11.04.2018 13:56

Ваша новая демонстрация работает, но кажется, что она работает только с обычным классом css, а не со значком семантического пользовательского интерфейса. Как вы думаете, есть ли способ заставить его работать на самом значке?

Jos van Weesel 11.04.2018 14:05

Сначала укажите скрипку со значком пользовательского интерфейса

Radonirina Maminiaina 11.04.2018 14:08

Позвольте нам продолжить обсуждение в чате.

Jos van Weesel 11.04.2018 14:12

С помощью ответа [Радонирины Маминиайны] [1] и некоторых изменений кода я заставил его работать именно так, как задумано.

Идея Радонирины заключалась в том, чтобы поместить второй значок сразу за исходным значком с помощью position: absolute; (см. Его код выше), но затем мне пришла в голову идея добавить класс "dark" к скрытому значку внизу и просто выбрать его, чтобы сделать непрозрачность. 0 и 1 при наведении, включая эффект перехода. Это значительно упростило CSS и прекрасно работает.

Еще раз спасибо!

Вот рабочий пример конечного результата:

$('.menu-toggle').click(function() {
  $('nav').toggleClass('nav-open', 500);
  $(this).toggleClass('open');
})
@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
/* Navigation bar */

header {
  position: fixed;
  height: 50px;
  width: 100%;
  background: #666666;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav a {
  color: #222;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1rem;
  font-family: Fjalla One;
}

.smallNav {
  position: absolute;
  top: 100%;
  right: 0;
  background: #CCCCCC;
  height: 0px;
  overflow: hidden;
}

.nav-open {
  height: auto;
}

.smallNav a {
  color: #444;
  display: block;
  padding: 1.5em 4em 1.5em 3em;
  border-bottom: 1px solid #BCBCBC;
}

.smallNav a:last-child {
  border-bottom: none;
}

.smallNav a:hover,
.smallNav a:focus {
  color: #222;
  background: #BABABA;
}

/* Menu toggle */

.menu-toggle {
  padding: 1em;
  position: absolute;
  right: 1em;
  top: 0.75em;
  cursor: pointer;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  content: '';
  display: block;
  background: white;
  height: 3px;
  width: 1.5em;
  border-radius: 3px;
}

.hamburger::before {
  transform: translateY(-6px);
}

.hamburger::after {
  transform: translateY(3px);
}

.open .hamburger {
  transform: rotate(45deg);
}

.open .hamburger::before {
  opacity: 0;
}

.open .hamburger::after {
  transform: translateY(-3px) rotate(-90deg);
}

.menu-toggle:hover {
  transform: scale(1.1);
}

i.icon {
  margin-right: 0.5em !important;
  font-size: 1.2em !important;
}

/* Change icons on hover */
nav a i.dark {
    position: absolute;
    left: 42px;
}
nav a i.dark {
    opacity: 0;
    transition: opacity .25s ease;
}
nav a:hover i.dark {
    opacity: 1;
    transition: opacity .25s ease;
}
nav a:hover i.outline {
	opacity: 0;
	transition: opacity .25s ease;
}
<!DOCTYPE html>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<header>
  <div class="header-container">

    <nav class="smallNav">
      <ul>
        <a href="#"><li><i class="icon home"></i>Home</li></a>
				<a href="#"><li><i class="icon star outline"></i><i class="icon star dark"></i>Featured</li></a>
				<a href="#"><li><i class="icon newspaper outline"></i><i class="icon newspaper dark"></i>News</li></a>
				<a href="#"><li><i class="icon user outline"></i><i class="icon user dark"></i>Career</li></a>
				<a href="#"><li><i class="icon envelope outline"></i><i class="icon envelope dark"></i>Contact</li></a>
      </ul>
    </nav>

    <div class="menu-toggle">
      <div class="hamburger">
      </div>
    </div>

  </div>
</header>

Другие вопросы по теме