ansaurus

Question

CSS Hover using jQuery to fade

Answer 1

A:

Hi,

Have a look at the following:

http://api.jquery.com/fadeIn/

Kind Regards,

Trefex 2010-07-06 09:17:48

That fades the element in from transparent (or vice versa if using fadeout). I want to simply add a transition to my css hover.

Cameron 2010-07-06 09:18:32

Oh my bad. Not sure how to do it then mate.

Trefex 2010-07-06 09:22:57

Did you have a look at this?http://plugins.jquery.com/project/bgImageTransition

Trefex 2010-07-06 09:23:54

Answer 2

A:

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"&gt;&lt;/script&gt;
</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"&gt;&lt;/script&gt;
</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>

Pranay Rana 2010-07-06 09:18:08

Answer 3

+1 A:

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

Marko 2010-07-06 09:54:49

Answer 4

+1 A:

Use the switchClass method in jQuery UI.

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

melhosseiny 2010-07-06 15:50:23

This works the best so far, but it's not switching back to my default state! Would it be possible for you to amend the code so that a user hovers it fades to the new class and then back to the other class when the hovers out. Thanks.

Cameron 2010-07-07 09:22:16

I've added the code I have at the moment to my Q

Cameron 2010-07-07 09:34:51

Can i see the css for the two classes Normal and Special?

melhosseiny 2010-07-07 12:26:26

ansaurus

tags:

views:

answers:

CSS Hover using jQuery to fade

related questions