на jQuery.addClass and.fadeIn?

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

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

спасибо!

EDIT:::

jQuery("h1").hover(function() {
      jQuery(this).stop().animate({ backgroundColor: "#a7bf51"}, 800);
      },function() {
      jQuery(this).stop().animate({ backgroundColor: "#FFFFFF"}, 800);
      });
});
8
dom html javascript jquery

6 ответов

попробуйте использовать jQuery UI .addClass и .removeClass.

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

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

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

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

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

});

демо

8

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

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

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

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

медленно исчезают, добавляют класс, а затем исчезают обратно в:

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

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

3

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

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

2

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

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

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

1

Если у вас загружена библиотека пользовательского интерфейса jQuery, вы можете установить дополнительный параметр для функции 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 секунду, когда не зависал.

1

попробуйте это, и вот jsFiddle ( Введите описание ссылки здесь):

<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>​
0