jQuery .addClass и .fadeIn?

Итак, у меня есть эти элементы h1, которые являются ссылками, и я хочу добавить к ним класс и добавить этот класс сразу после того, как элемент был наведен, и затем onMouseOut удалит класс, одновременно исчезая из класса. Но использование функции исчезновения ничего не делает для меня. Видя как скрывается элемент. Есть идеи?

<code>jQuery(".categories h1 a").hover(
function () {
    jQuery(this).fadeIn("slow").addClass("active");
},
function(){
    jQuery(this).fadeOut("slow").removeClass("active");
});
});
</code>

Спасибо!

EDIT:::

<code>jQuery("h1").hover(function() {
      jQuery(this).stop().animate({ backgroundColor: "#a7bf51"}, 800);
      },function() {
      jQuery(this).stop().animate({ backgroundColor: "#FFFFFF"}, 800);
      });
});
</code>
 Selvakumar Arumugam03 мая 2012 г., 23:29
@AaronBrewer Смотрите & gt; & gt;jsfiddle.net/NLChW/4 & Л; & л; используя анимацию
 Aaron Brewer03 мая 2012 г., 23:34
@Вега:squaredcube.com/beta Не работает.
 b0103 мая 2012 г., 23:21
Ясность, пожалуйста, что вы хотите, чтобы исчезнуть? Хотите ли вы, чтобы ссылка исчезала в том месте, где вы наводили курсор на h1? Ваш код будет исчезать, если он сработает, будет только сервер для исчезновения ссылки, но тогда вы не сможете снова его отобразить.
 Selvakumar Arumugam03 мая 2012 г., 23:36
@AaronBrewer Вам необходимо включить библиотеку пользовательского интерфейса jQuery на свою страницу. Попробуйте в том числе<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script> на вашей странице, и это должно работать.
 Aaron Brewer03 мая 2012 г., 23:23
Нет. Я хочу исчезнуть в классе, добавленном к тегу h1 & gt ;. а затем исчезают при наведении мыши

Ответы на вопрос(6)

вы можете установить дополнительный параметр для функции toggleClass.

Установите непрозрачность с помощью css.

h1 a {
  opacity:0.8;
}

h1 a.hovered {
  opacity: 1.0;
}

затем

jQuery(".categories h1 a").hover(function(e) {
    $(this).toggleClass('hover', 1000);
}

1000 - это миллисекундный счетчик события. Таким образом, эффект должен уменьшиться до 1,0 непрозрачности при наведении на секунду и на 1 секунду, если не наведен.

 03 мая 2012 г., 23:15
Вот почему я сказал: «Если у вас загружена библиотека jQuery UI». ;}

введите описание ссылки здесь) :

<script type="text/javascript">
    jQuery(".categories h1").hover(function () {
            jQuery(this).stop().animate({ "background-color": "#a7bf51"}, 800);
            jQuery(this).addClass("active");
            jQuery(this).find("a").fadeIn("slow");
        },
        function() {
            jQuery(this).stop().animate({ "background-color": "#FFFFFF"}, 800);
            jQuery(this).addClass("active");
            jQuery(this).find("a").fadeOut("slow");
    });
</script>
<style type="text/css">
    .categories h1 {
        background-color: rgb(200, 200, 200);
        display: block;
        padding: 5px;
        margin: 5px;
        width: 100px
    }
    .categories h1 a {
        display: none;
    }
</style>
<div class="categories">
    <h1><a href="#">Item 1</a></h1>
    <h1><a href="#">Item 2</a></h1>
    <h1><a href="#">Item 3</a></h1>
</div>​
Решение Вопроса

.addClass а также.removeClass.

$(function() {
    $(".categories h1 a").hover(function() {
        $(this).stop(true,true).addClass("active", 500);
    }, function() {
        $(this).stop(true,true).removeClass("active", 100);
    });    
});

DEMO (По какой-то причине он не анимируется должным образом (исчезает) в первый раз ... но затем он работает нормально)

Edit: Обновлено для полноты.

Вы также можете использовать.animate чтобы получить желаемый эффект. Увидеть ниже,

$(function() {
    $(".categories h1 a").hover(function() {
        $(this).stop().animate({
            backgroundColor: "#a7bf51"
        }, 800);
    }, function() {
        $(this).stop().animate({
            backgroundColor: "#FFFFFF"
        }, 800);
    });

});

DEMO

 03 мая 2012 г., 23:23
@ChristopherMarshall Причиной .stop является остановка перехода с постепенным исчезновением, иначе быстрое наведение на несколько ссылок приведет к одновременному отображению нескольких анимаций. Ну, вы сможете увидеть это, когда у вас больше продолжительность (1000 мс)
 03 мая 2012 г., 23:21
Это интересный способ сделать это. Проверьте мой ответ ниже, я чувствую, что он чище. Есть ли причина, по которой вы используете функцию остановки и addClass вместо переключения?
 Aaron Brewer03 мая 2012 г., 23:33
@Vega: Спасибо, Вега!
 03 мая 2012 г., 23:28
Интересно, спасибо за объяснение! Я не должен делать предположения о скорости мыши пользователей, ха-ха.

будто вы хотите, чтобы стили класса исчезли. Для этого вам нужно обратиться к animate ():http://api.jquery.com/animate/

fadeIn просто исчезает в элементе.

 Aaron Brewer03 мая 2012 г., 23:20
Хорошо, я попытался использовать эту функцию Animate и, похоже, даже не могу заставить ее работать сейчас ... См. Обновленный вопрос.
 03 мая 2012 г., 23:26
@AaronBrewer Смотрите & gt; & gt;jsfiddle.net/NLChW/4 & Л; & л; используя анимацию
 Aaron Brewer03 мая 2012 г., 23:33
@Vega: Heya Vega, это не работает.squaredcube.com/beta

что вы можете скрестить затухание между классами, но вы можете использоватьanimate функция.animate позволяет влиять на любую переменную CSS в течение указанного времени.

http://api.jquery.com/animate/

Я знаю, что это удаляет некоторые стили из файла CSS, но, опять же, я не думаю, что jQuery будет перекрестно затухать между классами.

 Aaron Brewer03 мая 2012 г., 23:20
Хорошо, я попытался использовать эту функцию Animate и, похоже, даже не могу заставить ее работать сейчас ... См. Обновленный вопрос.
 03 мая 2012 г., 23:15
Вот почему я сказал: «Если у вас загружена библиотека jQuery UI». ;}

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

(было полезно для меня, когда в моем приложении используется скрытый класс начальной загрузки)

Медленно исчезать при удалении класса:

$('.myClass').removeClass('hidden').fadeOut(0).fadeIn(10000)

Медленно исчезайте, добавьте класс, а затем вернитесь обратно:

$('.myClass').fadeOut(1000, function(){
    $(this).addClass('hidden'); //or any other class
}).fadeIn(10000)

надеюсь, это упростит кому-то задачу!

Ваш ответ на вопрос