JQuery - slow bg image change
I am trying to make a hover action with a slow bg image change.
.menu_part
{
border-left: 1px solid black;
background-image: url(../images/bg_menu.png);
float:left;
padding: 2px 10px;
}
.menu_part:hover
{
background-image: url(../images/bg_menu_hove.png);
color: #FFF;
}
Menu:
<div id="head_menu">
<a href="#order"><div>make order</div></a>
<a href="#portfolio"><div>portfolie</div></a>
<a href="#contacts"><div>contacts</div></a>
<a href="#vacancies"><div>vacancies</div></a>
<a href="#about"><div>about company</div></a>
</div>
Some JQuery:
$('#head_menu a').addClass('menu_part');
Now I am trying to write hover-action for selector $ ('# head_menu a'). Can I change the bg image if needed when hovering slowly?
Here's my example code:
$("#head_menu a").hover(
function() {
$(this).animate({backgroundImage: 'url(images/bg_menu_hove.png)', color: '#fff'}, 1000);
},
function() {
$(this).animate({backgroundImage: 'url(images/bg_menu.png)', color: '#000'}, 1000);
}
);
But he doesn't even show the menu. What have I done wrong? And I will also try to use bg-position.
Here is the code with bg-position, I cannot figure it out. I have combined bg_menu.png and bg_menu_hove.png into 1 image 200px + 200px. The style above doesn't even work without JQuery.
.menu_part:hover
{
background-image: url(../images/new_menu.png);
background-position: 0 -200px;
}
source to share
First of all, the standard technique for hovering with a changing background combines both photographs. So stick bg_menu_hove.png
before bg_menu.png
after that, just play with the background position.
Remove the tag div
from the tag a
(div is a block element and a is inline ... it could be the other way around).
Now, if we only have one image, use, for example, the animate
function from jQuery
( backgroundPosition
). Take a look at a good example and really useful site for beginners: http://visualjquery.com/
(Press: Effects -> Custom -> Animate
)
source to share
I think you could do it with jQuery's animate function , and some small changes to CSS are something like:
.menu_part
{
border-left: 1px solid black;
background-image: url(../images/bg_menu_hove.png);
float:left;
padding: 2px 10px;
}
.menu_part div
{
background-image: url(../images/bg_menu.png);
color: #FFF;
}
And then:
$('#head_menu a').addClass('menu_part');
$('.menu_part').bind('mouseover', function() {
$(this).find('div').animate({
opacity: 0
}, 1500 );
});
$('.menu_part').bind('mouseout', function() {
$(this).find('div').animate({
opacity: 1
}, 1500 );
});
Couldn't test it at this point, sorry - but you get the basic idea.
source to share