Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
Hi,
I'm searching for a method to create the following effekt using jquery.
The idea
I have a page with thumbnails of some photos on it. Initially the thumbnails should have an lower transparency maybe 30% of its original.
On hover the selected thumbnail should fade in to 100%.
I've been searchin for a while in goole but I'am not very experienced with jquery.
I hope someon can help me :)
THX in advance -
Here is my current script.
<script type="text/javascript">
$(document).ready(function(){ // This sets the opacity of the thumbs to 60 %
$(".thumbs img").fadeTo("slow", 0.6);
$(".thumbs img").hover(function(){ // This should set the opacity to 100% on hover, but it doesn't work :(
$(".thumbs img").fadeTo("slow", 1.0);
}
});
</script> -
this should do it:
$(document).ready(function(){ // This sets the opacity of the thumbs to fade down to 60% when the page loads
$(".thumbs img").fadeTo("slow", 0.6);
$(".thumbs img").hover(function(){
$(".thumbs img").fadeTo("slow", 1.0); // This sets the opacity to 100% on hover
},function(){
$(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity back to 60% on mouseout
});
}); -
The fading works now. But I've unfortunately more than one thumbnail on my page an so every single thumb fades. Is it possible to fade just the currently selected thumbnail?
-
ah yeah I should have tested my code with more than one image :P
here's what you need:
$(document).ready(function(){
$(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads
$(".thumbs img").hover(function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout
});
}); -
You're awesome!! That works perfect!
Thanks a lot -
Does jquery offer a method that makes it possible to fade a RGB thumbnail from greyscale to RGB?
At first the thumb would be displayed in greyscale and on mouse over it should fade to color and on mouse out back to greyscale.. -
jquery cant convert colors for you. You need to provide two thumbnails (one greyscale and other RGB) for each image and fade out one to 0% opacity and fade in the other to 100% opacity on hover.
-
- CommentAuthormdavidadams
- CommentTimeFeb 14th 2007
HELP!!
I am trying to use the jquery thing like above, also with initial loading fadein.
I'm new to jquery and that type of thing, but not to coding. I'm having problems with multiple images, and classes. The jquery website is not easily understandable.
Any help would be greatly appreciated -
mdavidadams - any sample code you can provide us so we can help you?
-
Hallo JohnRiv,
I am a biginner with jQuery. I find this site with google. I try to use your code for a css list menu. In my menu I use the css :hover for a "little" animation. An this is it what I try to fade with jquery - the :hover effect. I have three imgs, one vor "normal", one for ":hover" and one for "act". Alle bg-imgs have the same dimension, but the content of the bg-imgs are different. For "normal" it is only the text (pixel), for ":hover" it is the same text like "normal" and a star under the text. This works with some edits of your code.
For the "act"-img the text ist bigger and italic and the star is bigger too. When I change your code, than first you see the "hard" css-:hover-effect, and after that the jquery effect. This looks not good.
So what I have to do, that the "act"-img fades to the ":hover"-img, without the "hard"-css-effect? I don't want to delete the :hover-effect in the css-file, because If anyone have disabled javascript, so the css-:hover-effect is still there.
I hope, you can help me, and my english is understandable.
Best regards from germany
arno -
-
CommentAuthorthumblewend
- CommentTimeApr 15th 2007
Hi Arno. If you want to keep the CSS :hover effect for when JavaScript is not available but remove it when it is available, you could add a class to the body element (or any other element that contains all the hovered items), then declare your :hover rules like this:
body.noJS img:hover { /*apply CSS hover effect*/ }
Then, at the start of your JavaScript simply remove the 'noJS' class, which will disable the basic CSS :hover effect. Then apply the fancy hover effect as described by JohnRiv above.
$("body").removeClass("noJS");
Hope this helps a little. -
-
I'm thinking of implementing this into a website. But i feel some instructions are missing. What do I have to write to define the image I want the fading effect.? Could someone post a link to a working sample.
-
- CommentAuthorBrady J. Frey
- CommentTimeNov 15th 2008
Thank you for this reference, it helped me stylize:
http://bradyjfrey.com/portfolio/Thankful People: diego -
Hi Guys,
I have downloaded the jquery accordian plugin developed by Alexander Graef. But I am unable to customize it for the same accordian effect as on www.microsoft.com homepage. The tweaking is I guess simple but I am not familiar with it. Any help would be great.
God bless you all. -
Thank you for this tutorial. It is just what I was after for a CSS 2.1 valid way to create a hover/transparency effect for the ads in the sidebar on my site. I created test page, which works perfectly. The same code placed into my site isn't working, though. Please see the 125x125 ads images in the sidebar. The script is identical, jquery call the same, etc. Strangely, it does work if I assign the class to each image individually, but not when the images are inheriting the div properties from their div (as in the example).
Any thoughts on what might be the conflict are greatly appreciated. Thanks! -
- CommentAuthorwilliam.smith
- CommentTimeMar 6th 2011
Its really niec and interesting post värdera bostadsrätt -
I am a new employee of Peak Potential Ltd. and I am new to jquery. When I first used it, I already love the language. But I'm still reading some tutorials to learn more.
1 to 18 of 18