How to change Opacity with jQuery
Change the opacity of an element on MouseOver using jQuery
Build the HTML
First of all build the container. I’ll use an image to create the effect.
<div class="container container2">
<img src="http://www.quicoto.com/upload/files/2008/11/6341893.jpg" alt="" />
</div>
<img src="http://www.quicoto.com/upload/files/2008/11/6341893.jpg" alt="" />
</div>
Wich will have a background image, hidden under the main image.
<style>
.container2{
width:144px;
height:152px;
background-image:url(http://php.quicoto.com/examples/14/background.jpg);
}
</style>
.container2{
width:144px;
height:152px;
background-image:url(http://php.quicoto.com/examples/14/background.jpg);
}
</style>
Add the JavaScript
Now let’s use the jQuery code:
<!- Include the jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
/* I'm using the "container" class. You could use any class or ID*/
$(".container img").hover(
function() {
$(this).stop().animate({"opacity": "0.2"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
/* I'm using the "container" class. You could use any class or ID*/
$(".container img").hover(
function() {
$(this).stop().animate({"opacity": "0.2"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
</script>
You can change the opacity effect to a lower / higher levels.
Tha’s all. Check out the live Demo below or the full code.
Full Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example 14 | Developer's Blog</title>
<meta charset="utf-8">
<style>
.container1{
width:144px;
height:152px;
background-color:black;
}
.container2{
width:144px;
height:152px;
background-image:url(http://php.quicoto.com/examples/14/background.jpg);
}
</style>
</head>
<body>
<h3>With Background color Black</h3>
<div class="container container1">
<img src="http://www.quicoto.com/upload/files/2008/11/6341893.jpg" alt="" />
</div>
<h3>With Background Image</h3>
<div class="container container2">
<img src="http://www.quicoto.com/upload/files/2008/11/6341893.jpg" alt="" />
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".container img").hover(
function() {
$(this).stop().animate({"opacity": "0.2"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
</script>
</body>
</html>
<html lang="en">
<head>
<title>Example 14 | Developer's Blog</title>
<meta charset="utf-8">
<style>
.container1{
width:144px;
height:152px;
background-color:black;
}
.container2{
width:144px;
height:152px;
background-image:url(http://php.quicoto.com/examples/14/background.jpg);
}
</style>
</head>
<body>
<h3>With Background color Black</h3>
<div class="container container1">
<img src="http://www.quicoto.com/upload/files/2008/11/6341893.jpg" alt="" />
</div>
<h3>With Background Image</h3>
<div class="container container2">
<img src="http://www.quicoto.com/upload/files/2008/11/6341893.jpg" alt="" />
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".container img").hover(
function() {
$(this).stop().animate({"opacity": "0.2"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
</script>
</body>
</html>
Related PostsIf you liked How to change Opacity with jQuery; the posts below might interest you too:
|
November 15, 2010
20:37
hey Quicoto
thank you for the post, It can be used in so many different ways. I will use it in my store.
Will you write how to add “carousel” to a wordpress blog? I have searched for the right code for quite a while, found a few blogs that gave away many details but the code didn’t want to work, maybe it was designed for a different version of wordpress.
and I have one question: do you know how to block the keywords ( from my website) from being viewed by others, on the Internet? for example through the source code page?
thank you, best wishes
Nicole!
November 15, 2010
23:12
Hi Nicole,
Many questions
1) I can look for a carousel slideshow but won’t be easy. I hope I can find some time to write it
2) “keywords”? You mean the meta keywords? Why do you wanna block it? Google is no longer using keywords.
Thanks for commenting.
Regards
November 16, 2010
13:58
hey
that’s fine with the carousel, if you are too busy, don’t worry
yes, I meant the meta keywords:)
how do you mean? Google is no longer using keywords? it is the way people find your site
please explain
Thanks, Nicole
November 16, 2010
14:54
Yes, Matt Cutts from Google explained google is no longer using the meta keywords.
They read all your content in order to show it to the user. They use title, url, metadescription and of course (like I said) the main content.
http://www.youtube.com/user/GoogleWebmasterHelp
Regards
November 16, 2010
18:23
thanks
February 4, 2012
19:41
Good afternoon,
I’m a multimedia design student in ESAD, a portuguese college. I’ve been looking for something related to this…I’m finishing my portfolio but something’s missing…..I’m trying to change the colour of my text when scrolling, so that the central part of text turns black and the remaining text (upper, and below) stays grey. Can you help me? I think it can be done with jQuery, but I’m not used to working with jQuery, only PHP and HTML.
Look forward to hear from you,
Andrea
February 4, 2012
19:46
Hi Andrea,
I’m afraid I don’t know how to change the colour text on “scroll”.
Have you tried to look it up in the oficial documentation ? http://jquery.com/
Regards
February 4, 2012
19:43
The best way to explain what I want with this scrolling, is by accessing this website, which has pretty much the same thing, also with a cute effect.
try scrolling to see how it looks like
February 5, 2012
14:56
I’ve been reading it since yesterday, no results so far… Thanks.
February 5, 2012
17:03
I’ve got it! a jquery doc in the wrong place…it finally works
thank you