Response title
This is preview!
Move this topic
[jQuery] simple fade in/out
in Using jQuery
•
13 years ago
anyone have a script or tutorial that just targets a .class so
on :hover it fades in a background color than fades out a background
color on roll out.
thanks :)
Replies(14)
Re: [jQuery] simple fade in/out
13 years ago
Untested, but it may be as simple as something like this:
$(".classname").mouseover(function(){
$(this).fadein();
}).mouseout(function(){
$(this).fadeout();
});
Look at the page examples for fadein and fadeout at docs.jquery.com.
If you need more control over the effects or want different fadein and
fadeout colors you may need to use the "animate" effect instead.
Leave a comment on nrmlcrptrdr's reply
Re: [jQuery] simple fade in/out
13 years ago
thanks for your help but I can't get it to work.
Anyway you can make a test case or something for me, I am just looking
for a link to have a background color and when you rollover the link
it fades in a new background color, than on rollout it fades that
background color out.
Leave a comment on chrisp82's reply
Re: [jQuery] simple fade in/out
13 years ago
Chris,
I don't have access to a public test server to create a demo, but I'll
see if I can create a test case.
You might also want to look at the .hover command.
Can't you do this with normal CSS, or must you have a fancy fadein/
fadeout effect?
Have you considered the the case where someone rolls over the link
quickly? Any fade in or fade out will have some execution time
associated with it.
Brad
Leave a comment on nrmlcrptrdr's reply
Re: [jQuery] simple fade in/out
13 years ago
yeah if you can create a test case it would be greatly appreciated. :)
I know it can be done with just plain css, but I wanna figure this out
so I can play around with it for other things too.
Leave a comment on chrisp82's reply
Re: [jQuery] simple fade in/out
13 years ago
It would be greatly appreciated if you can do me a test case
scenario. :)
I know you can do it with css but I wanna mess around with this for
other stuff too.
Leave a comment on chrisp82's reply
Re: [jQuery] simple fade in/out
13 years ago
It would be greatly appreciated if you can do me a test case
scenario. :)
I know you can do it with css but I wanna mess around with this for
other stuff too.
Leave a comment on chrisp82's reply
Re: [jQuery] simple fade in/out
13 years ago
It would be greatly appreciated if you can do me a test case
scenario. :)
I know you can do it with css but I wanna mess around with this for
other stuff too.
Leave a comment on chrisp82's reply
Re: [jQuery] simple fade in/out
13 years ago
Chris,
A simple example that shows the background color of a link changing on
hover. This same effect could be achieved through pure CSS.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var bg = $("a").css('background-color'); // save to restore
$("a").hover(
function () {
$(this).css({'background-color':'red'});
},
function () {
$(this).css({'background-color': bg });
}
);
});
</script>
</head>
<body>
<a href="#">one</a>
<a href="#">two</a>
<a href="#">three</a>
</body>
</html>
This doesn't fade in and out but simply changes the background color.
I tried animate instead of css, but I don't think that animate can
change colors. If you really want a fade affect you may have to write
a function that progressively changes the background color from
orginal to final and vice versa. Search this form for "animate change
color". There might even be a plugin that will do what you want.
hth
Leave a comment on nrmlcrptrdr's reply
Re: [jQuery] simple fade in/out
13 years ago
Would you know how to animate it?
I really wouldn't have any ideas on how to get it to do that.
but I appreciate all your help!
Leave a comment on chrisp82's reply
Re: [jQuery] simple fade in/out
13 years ago
Would you know how to animate it?
I really wouldn't have any ideas on how to get it to do that.
but I appreciate all your help!
Leave a comment on chrisp82's reply
Re: [jQuery] simple fade in/out
13 years ago
Would you know how to animate it?
I really wouldn't have any ideas on how to get it to do that.
but I appreciate all your help!
Leave a comment on chrisp82's reply
Re: [jQuery] simple fade in/out
13 years ago
Would you know how to animate it?
I really wouldn't have any ideas on how to get it to do that.
but I appreciate all your help!
Leave a comment on chrisp82's reply
Re: [jQuery] simple fade in/out
13 years ago
<div dir="ltr">jQuery UI Effects does color animations. See:
<a href="http://docs.jquery.com/UI/Effects/ColorAnimations">http://docs.jquery.com/UI/Effects/ColorAnimations</a>
- Richard
<a href="http://docs.jquery.com/UI/Effects/ColorAnimations">http://docs.jquery.com/UI/Effects/ColorAnimations</a>
- Richard
Leave a comment on rdworth's reply
Re: [jQuery] simple fade in/out
13 years ago
thanks that is what I was looking for :)
sry for the double posts!
Leave a comment on chrisp82's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to chrisp82's discussion
{"z2655461":[14737000000330521],"z2963300":[14737000000330495,14737000000330499,14737000000330503,14737000000330505,14737000000330507,14737000000330509,14737000000330513,14737000000330515,14737000000330517,14737000000330519,14737000000330523],"z2968344":[14737000000330497,14737000000330501,14737000000330511]}