CODEWITHSUNDEEP
jquerycss
Cameron
Cameron

Reputation: 28783

CSS Hover using jQuery to fade

I have a simple link that changes when the user hovers, so something along these lines:

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;
}

Changed my mind about what I want to happen, basically I want to make it so that when a user hovers the link it will do the :hover stuff but slowly instead of instantly. So like a transition effect. I've made it into a class to make it easier to deal with the hover malarkey, so I'm guessing a simple add class and remove class but with some sort of fade timer?

I'm effectively trying to do this:

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

But I want it to fade between the two classes!

/////////////////////// EDIT:

This is the code I have at the moment -->

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

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

Which works fine, but I want to make it fade in and fade out, tried using 'fade' as the transition but it doesn't work?

Upvotes: 1

Views: 3932

Answers (3)

melhosseiny
melhosseiny

Reputation: 10144

Use the switchClass method in jQuery UI.

$(elem).switchClass('currentClass', 'newClass', 500);

Upvotes: 1

Pranay Rana
Pranay Rana

Reputation: 176896

use : .hover()

following is example also availble on the link page pasted by me. 

<!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>

Edit :

use toggle as used in below function will do the work for you

<!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>

Upvotes: 0

Marko
Marko

Reputation: 72222

You can create a sprite image and animate it's background position if this meets your needs.

Have a look at this post http://snook.ca/archives/javascript/jquery-bg-image-animations/

Other than that, you have to fade out the whole element, add a class with the new BG, and fade in the element. If you have it happen quite fast (i.e. 200/300ms) the transition should be quite good.

You can try something like this:

$(document).ready(function() {
    $(".mylink").hover(function() {
        $(this).fadeOut(200).addClass("jqHover").fadeIn(300);
    },
        $(this).fadeOut(200).removeClass("jqHover").fadeIn(300);
    );
}

Upvotes: 1

Related Questions