Вопрос по javascript, html, dom, jquery – jQuery .addClass и .fadeIn?

8

Итак, у меня есть эти элементы 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>
@Вега:squaredcube.com/beta Не работает. Aaron Brewer
@AaronBrewer Смотрите & gt; & gt;jsfiddle.net/NLChW/4 & Л; & л; используя анимацию Selvakumar Arumugam
Ясность, пожалуйста, что вы хотите, чтобы исчезнуть? Хотите ли вы, чтобы ссылка исчезала в том месте, где вы наводили курсор на h1? Ваш код будет исчезать, если он сработает, будет только сервер для исчезновения ссылки, но тогда вы не сможете снова его отобразить. b01
Нет. Я хочу исчезнуть в классе, добавленном к тегу h1 & gt ;. а затем исчезают при наведении мыши Aaron Brewer
@AaronBrewer Вам необходимо включить библиотеку пользовательского интерфейса jQuery на свою страницу. Попробуйте в том числе<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script> на вашей странице, и это должно работать. Selvakumar Arumugam

Ваш Ответ

6   ответов
2

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

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

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

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

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

.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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Похожие вопросы