Slide en mouseenter automatique
Bonsoir à vous, j'en viens à demander votre aide sur un soucis surement simple mais qui m'échappe.
Je m'explique... j'essaie de faire en sorte à ce que le slide soit horizontal et dont les valeurs soient définies de façon automatique en rapport à l'élément parent. (je sais pas si je suis clair mais je vais tenter)
Voici la démo de Mootools dont je me suis inspiré :
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
|
var szNormal = 117, szSmall = 100, szFull = 219;
var kwicks = $$("#kwicks .kwick");
var fx = new Fx.Elements(kwicks, {wait: false, duration: 300, transition: Fx.Transitions.Back.easeOut});
kwicks.each(function(kwick, i) {
kwick.addEvent("mouseenter", function(event) {
var o = {};
o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
kwicks.each(function(other, j) {
if(i != j) {
var w = other.getStyle("width").toInt();
if(w != szSmall) o[j] = {width: [w, szSmall]};
}
});
fx.start(o);
});
});
$("kwicks").addEvent("mouseleave", function(event) {
var o = {};
kwicks.each(function(kwick, i) {
o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
});
fx.start(o);
}) |
J'en suis donc arrivé à ceci :
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
|
window.addEvent('domready',function() {
var items=$$('.item');
var fx=new Fx.Elements(items,{wait:true,duration:500});
items.each(function(_item,i) {
_item.addEvent('click',function(e) {
var obj={}; obj[i]={'height':[_item.setStyle('height','auto')]};
items.each(function(other,j) {
if(other!=_item) {
var w=other.getStyle('height').toInt();
if(w!=36)obj[j]={'height':[w,36]};
}
});
fx.start(obj);
});
});
items.addEvent('mouseleave',function(e) {
var obj={};
items.each(function(other,j) {
obj[j]={'height':[other.setStyle('height',36)]};
});
fx.start(obj);
});
}); |
Avec ma solution, cela s'agrandit comme il faut mais... je perds l'effet Fx.Elements(items,{wait:true,duration:500});
Donc si quelqu'un peut m'aiguiller, je lui en serai très reconnaissant. Merci.