JQuery - slowly bg-image changing
Question
I'm trying to make my hover-action with slowly bg-image changing.
.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'm trying to write hover-action for selector $('#head_menu a'). Could i change bg-image to need, when hover, slowly?
Here is my trying-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 it even doesn't show menu now. What i did wrong? And I'll also try to use bg-position.
Here is code with bg-position, I can't understand. I merged bg_menu.png and bg_menu_hove.png into 1 image 200px+200px. Style above doesn't work even without JQuery.
.menu_part:hover
{
background-image: url(../images/new_menu.png);
background-position: 0 -200px;
}
Solution
First of all, standard technics for hover effects with changing background is merge both of pictures. So, stick bg_menu_hove.png
to bg_menu.png
after that, just play with position of background.
Remove div
from a
tag (div is block element and a is inline... it could be vice versa).
Now if we have only one image, use for example animate
function from jQuery
of course (backgroundPosition
).
Take a look on nice example, and really useful site for begginer: http://visualjquery.com/
(click: Effects -> Custom -> Animate
)
OTHER TIPS
I think you might be able do this with the jquery animate function, and some slight changes to the CSS - 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 the moment, sorry - but you get the basic idea.