CSS Hover с использованием jQuery, чтобы исчезнуть - PullRequest
Новая
       5

CSS Hover с использованием jQuery, чтобы исчезнуть

1 голос
/ 06 июля 2010

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

a.mylink {
    background: url(..) top left no-repeat;
    width: 100px; height: 100px;
}

a.mylink:hover,
a.mylink.jqHover {
    background: url(..) top left no-repeat;
    color: red;
}

Передумал о том, что я хочу, в основном я хочу сделать это такчто когда пользователь наводит ссылку на ссылку, он выполняет: hover, но медленно, а не мгновенно.Так как эффект перехода.Я превратил его в класс, чтобы было легче справиться с парящей малярией, поэтому я предполагаю простой класс добавления и удаления класса, но с каким-то таймером затухания?

I 'Я эффективно пытаюсь сделать это: 

$('a.mylink').hover(
            function () {
                $(this).addClass('.jqHover');
            },
            function () {
                $(this).removeClass('.jqHover');
            }
        );

Но я хочу, чтобы это исчезло между двумя классами!

///////////////////////// РЕДАКТИРОВАТЬ:

Это код, который у меня есть на данный момент -> 

$("ul.BrightLozenges li a").hover(

        function() {
            $(this).switchClass('Normal','Special',200,'easeOutBounce');
        }, 
        function() {    
            $(this).switchClass('Special','Normal',200,'easeOutBounce');
        });

, который работает хорошо, но я хочу, чтобы он исчезал и исчезал, пытался использовать 'Fade' в качестве перехода, но он не работает?

Ответы [ 3 ]

1 голос
/ 06 июля 2010

Вы можете создать изображение спрайта и анимировать его положение фона, если это соответствует вашим потребностям.

Посмотрите на этот пост http://snook.ca/archives/javascript/jquery-bg-image-animations/

Кроме этого, вы должны постепенно затухать весь элемент, добавлять класс с новой BG и затухать в элементе. Если у вас это происходит довольно быстро (то есть 200/300 мс), переход должен быть довольно хорошим.

Вы можете попробовать что-то вроде этого: 

$(document).ready(function() {
    $(".mylink").hover(function() {
        $(this).fadeOut(200).addClass("jqHover").fadeIn(300);
    },
        $(this).fadeOut(200).removeClass("jqHover").fadeIn(300);
    );
}
1 голос
/ 06 июля 2010

Используйте метод switchClass в jQuery UI . 

$(elem).switchClass('currentClass', 'newClass', 500);
0 голосов
/ 06 июля 2010

использование: .hover ()

следующий пример также доступен на странице ссылок, вставленной мной. 

<!DOCTYPE html>
<html>
<head>
  <style>
  ul { margin-left:20px; color:blue; }
  li { cursor:default; }
  span { color:red; }
</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
 <ul>
    <li>Milk</li>
    <li>Bread</li>
    <li class='fade'>Chips</li>

    <li class='fade'>Socks</li>
  </ul>
<script>
$("li").hover(
  function () {
    $(this).append($("<span> ***</span>"));
  }, 
  function () {
    $(this).find("span:last").remove();
  }
);



//li with fade class
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});

</script>
</body>
</html>

Редактировать:

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

<!DOCTYPE html>
<html>
<head>
  <style>
p { background:#dad;
font-weight:bold;
font-size:16px; }
</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
 <button>Toggle 'em</button>

<p>Hiya</p>
<p>Such interesting text, eh?</p>
<script>
$("button").click(function () {
$("p").toggle("slow");
});    
</script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...