Fade images jQuery
- Started
- Last post
- 5 Responses
- iamjustoneman
Hi all,
I have used the following technique for fading an image using jQuery:
http://www.alistapart.com/articl…
Does anyone know how I can adapt this for single buttons, i.e. not navigation, therefore not ul lists?
Appreciate any help.
Thanks
- Stugoo0
principally it works all works in the same way.
create a background image with normal and hover states and apply the class to it....
does this help :
- iamjustoneman0
Thanks for that, just how the jquery references the ul tag, suppose I could change that, will have a play around.
Thanks
- Stugoo0
how are you getting on?
post some code if your getting stuck.
- iamjustoneman0
Hi all,
Still not managed to get this working, here is what I for my menu, which fades the images perfectly:
html:
<div id="navigation_primary">
<ul>
<li class="home hover"><a href="home">Home</a></li>
<li class="services hover"><a href="services">Services</a></li>
<li class="work hover"><a href="work">Work</a></li>
<!--<li class="blog hover"><a href="blog">Blog</a></li>-->
<li class="contact hover"><a href="contact">Contact</a></li>
</ul>
</div>Here is my jQuery:
$(document).ready(function() {
navigationPrimary();
});function navigationPrimary() {
$('#navigation_primary li').removeClass('hover');
$('#navigation_primary li a')
.css({ opacity: 1.0 })
.mouseover(function() {
$(this).stop().animate(
{ opacity: 0.0 }
, 300);
})
.mouseout(function() {
$(this).stop().animate(
{ opacity: 1.0 }
, 1000);
});
}and finally, here is my css:
/*=NAVIGATION PRIMARY - BASE STYLES
--------------------------------...
#navigation_primary {
height: 66px;
float:right;
}
#navigation_primary ul {
list-style: none;
padding: 0;
margin: 0;
}
#navigation_primary li {
float: left;
display: block;
height: 66px;
width: 122px;
background: url(../images/menu.png) 0 0 no-repeat;
}/*=NAVIGATION PRIMARY - LIST ITEM - BACKGROUND POSITIONS
--------------------------------...
#navigation_primary li.home { background-position: 0 0; }
#navigation_primary li.services { background-position: -122px 0; }
#navigation_primary li.work { background-position: -242px 0; }
#navigation_primary li.blog { background-position: -362px 0; }
#navigation_primary li.contact { background-position: -362px 0; }#navigation_primary a {
display: block;
height: 66px;
width: 122px;
text-indent: -9999px;
background: url(../images/menu.png) 0 -132px no-repeat;
}/*=NAVIGATION PRIMARY - ANCHOR - DEFAULT BACKGROUND POSITIONS
--------------------------------...
#navigation_primary li.home a { background-position: 0 -132px; }
#navigation_primary li.services a { background-position: -122px -132px; }
#navigation_primary li.work a { background-position: -242px -132px; }
#navigation_primary li.blog a { background-position: -362px -132px; }
#navigation_primary li.contact a { background-position: -362px -132px; }/*=NAVIGATION PRIMARY - ANCHOR - HOVER BACKGROUND POSITIONS
--------------------------------...
#navigation_primary li.home.hover a:hover { background-position: 0 0; }
#navigation_primary li.services.hover a:hover { background-position: -122px 0; }
#navigation_primary li.work.hover a:hover { background-position: -242px 0; }
#navigation_primary li.blog.hover a:hover { background-position: -362px 0; }
#navigation_primary li.contact.hover a:hover { background-position: -362px 0; }/*=NAVIGATION PRIMARY - ANCHOR - CURRENT PAGE BACKGROUND POSITIONS
--------------------------------...
#home #navigation_primary li.home a { background-position: 0 -66px; }
#services #navigation_primary li.services a { background-position: -122px -66px; }
#work #navigation_primary li.work a { background-position: -242px -66px; }
#blog #navigation_primary li.blog a { background-position: -362px -66px; }
#contact #navigation_primary li.contact a { background-position: -362px -66px; }This works a treat but I cannot seem to modify it to work with none list items, for example, I am trying to fade two images for a contact graphic:
<a class="action_home" href="contact"><em>We'd love to hear from you</em></a>
The css, which currently works as a regular hover is:
a.action_home {
background:url(../images/action... no-repeat 0 0;
width:285px;
height:54px;
display:block;
}I think the bit that is failing me is the jQuery side of things, looking at the small bit of code, looks like it looks for the primary_navigation and uses the list items too, how can I add to this?
Appreciate any help.
Thanks
- acescence0
if i'm understanding this correctly, what is achieving the effect in your first example is that you've got two elements on top of each other both with bg images, so when the anchor tag fades, it reveals the li bg image below. in your second example, you need to have two overlapping elements to fade between them, like this...
http://culturekiller.com/qbeans/…
when you roll over it, the red color you see is the bg color of the containing div.