[MooTools] joomla mootools 1.1

Bonjour à tous,

J'utilise le CMS joomla, qui utilise mootools 1.1 .
Je voudrais faire cet effet sur des div :
http://demos111.mootools.net/Fx.Styles

voici ma partie de chose qui m'interesse :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="items box" id="idList">
	<?php if ($title = $this->category->get('items_title')) : ?>
		<h1 class="items-title"><?php echo $title; ?></h1>
	<?php endif; ?>
 
	<?php $i = 0; ?>
	<?php while((list($key, $item) = each($this->items)) || ($i % $this->item_cols != 0)) : ?>
	<?php if ($i % $this->item_cols == 0) echo ($i > 0 ? '</div><div class="row">' : '<div class="row first-row">'); ?>
	<div class="<?php echo 'width'.intval(100 / $this->item_cols); ?> <?php if ($i % $this->item_cols == 0) echo 'first-item'; ?>">
	<?php echo $this->partial('item', array('item' => $item)); ?>
	</div>
		<?php $i++; ?>
	<?php endwhile; ?>
			</div>

on ce code :

Code:

1
2
3
4
5
6
7
8
9
10
11
 
<div id="idList" class="items box">
<div class="row first-row">
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
</div>

et je voudrais que chaque div , fasse le meme effet que les <li> de lexemple.

voici mon fichier script :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var list = $$('#idList div');
list.each(function(element) {
 
	var fx = new Fx.Styles(element, {duration:200, wait:false});
 
	element.addEvent('mouseenter', function(){
		fx.start({
			'margin-left': 5,
			'background-color': '#666',
			color: '#ff8'
		});
	});
 
	element.addEvent('mouseleave', function(){
		fx.start({
			'margin-left': 0,
			'background-color': '#333',
			'color': '#888'
		});
	});
 
});

Mais ca ne marche pas . Quelqu'un voit il le soucis ?

Merci bcp