Hi all,
I realised something like http://demos.mootools.net/Fx.Elements with
JQuery
with background image transition.
But images are not resized simultaneously, so the last button sometime
get down.
You can see it in action on http://denon.joomlation.org
More precisions
-----------------------
I used a link list with images. ul>li>a>img
"Inactive" images (shorter) are declared in the A element from the CSS
"Active" images (larger) are in "img", into the html code
The goal is to switch images with a transition and sizing effect.
Here is my actual code (lien=link):
$(function() {
$(".lien").children("img").hide(); // hide all IMG elements
var speed = 300;
$(".lien").mouseover(function(){
var cur_btn = $(this).attr("href");
$(".lien").each(function(){
lien = $(this).attr("href")
if ( lien == cur_btn ) {
$(this).animate({ width: "320px" },
{ queue: false, duration: speed }
);
$(this).children("img").animate({ width: "320px",
opacity: "1" },
{ queue: false, duration: speed }
);
} else {
$(this).animate({ width: "187px" },
{ queue: false, duration: speed }
);
}
});
});
$(".lien").mouseout(function(){
var cur_btn = $(this).attr("href");
$(".lien").each(function(){
lien = $(this).attr("href")
if ( lien == cur_btn ) {
$(this).children("img").animate({ opacity: "0" },
{ queue: false, duration: speed }
);
}
$(this).animate({ width: "220px" },
{ queue: false, duration: speed }
);
});
});
});
But redimensioning links are not simultaneous so I had to keep free
space on the right.
Any solution?
