Animation qui se répète

Version imprimable

Bonjour, j'ai un souci :

j'ai une liste de produits(prestashop) qui s affiche dans des <li>, j'ai fait un script qui affiche un bloc "en savoir plus" en opacity lorsque je passe ma souris sur une des <li> sauf que cet effet affiche tout mes blocs "en savoir plus" lorsque je passe ma souris sur une des <li> , j'ai chercher pendant des heures sur le net, fait plusieurs test avec différentes fonctions mais toujours le meme souci ! si quelqu'un pourrait me filer un coup de main ce serai sympa car la je bloque !

Ci joint le code (css, js et html/php):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
.category-bloc-hover{
background:url(../img/overlay.png);
color:white;
font-size:12px;
line-height:25px;
display:block;
}
#englobhover{
position:absolute;margin:65px 0 0 12px;
width:150px;
height:25px;
line-height:25px;
display:block;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$(document).ready(function(){
		$('#englobhover span').hide(); 
 
		$('#product_list li').hover(function(){
			$('#englobhover span').fadeToggle(500);
		});
 
		$('#product_list li').mouseleave(function(){
			$('#englobhover span').hide('fade');
		});
 
	return false;
});

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
 
<!-- Products list -->
	<ul id="product_list" class="clear">
	{foreach from=$products item=product name=products}
		<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix">
			<h3 id="englobhover"> <span class="category-bloc-hover">Voir le produit</span></h3>
 
				<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} /></a>
				<h3 class="titre-produits">{if isset($product.new) && $product.new == 1}{/if}<a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></h3>
 
 
 
				{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="on_sale">{l s='On sale!'}</span>
				{elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="discount">{l s='Reduced price!'}</span>{/if}
				{if isset($product.online_only) && $product.online_only}<span class="online_only">{l s='Online only!'}</span>{/if}
				{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
 
				<!-- prix -->{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="category-prix-produits"">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{/if}
 
				{/if}
 
		</li>
	{/foreach}
	</ul>

26/09/2011, 13h45
SpaceFrog

mouseenter et mouseleave ?
26/09/2011, 13h51
sixweb

Citation:

Envoyé par SpaceFrog

mouseenter et mouseleave ?

non il y a que mouseleave !
26/09/2011, 14h03
SpaceFrog

ben justement !
remplace ton hover par mouseenter !
26/09/2011, 14h06
sixweb

Citation:

Envoyé par SpaceFrog

ben justement !
remplace ton hover par mouseenter !

j'ai deja essayé et c'est toujours pareil !

je te joint le lien du site en dev par mp si tu veux voir ce que a donne !

Code:

1
2
3
$('#product_list li').hover(function(){
	$(this).fadeToggle(500);
});

26/09/2011, 14h29
sixweb
Citation:
Envoyé par Bovino

Code:

1 2 3 $('#product_list li').hover(function(){ $(this).fadeToggle(500); });
merci bovino, mais dans cette fonction c'est que mon element #product_list li qui a un effet et mon bloc #englobhover span ne s'affiche pas car il n'est pas appelé.

Je souhaiterai que quand je passe ma souris sur #product_list li mon bloc #englobhover span s'affiche .

désolé je débute en js !
26/09/2011, 14h39
Bovino

Code:

$(this).find('#englobhover span')

Mais bon, vu que tu as manifestement des id qui se répètent, ça risque d'être problématique... :roll:
Ou sinon

Code:

$(this).find('h3 span')

Citation:

Envoyé par Bovino

Code:

$(this).find('#englobhover span')

Mais bon, vu que tu as manifestement des id qui se répètent, ça risque d'être problématique... :roll:
Ou sinon

Code:

$(this).find('h3 span')

merci bovino :ccool: ca marche niquel.

Je joint le code si ca peut aider quelqu un sait on jamais ;)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <script type="text/javascript"> $(document).ready(function(){ $('#englobhover span').hide(); $('#product_list li').hover (function(){ $(this).find('h3 span').fadeToggle(500); }); $('#product_list li').mouseleave(function(){ $(this).find('h3 span').hide('fade'); }); return false; }); </script>

26/09/2011, 14h52
Bovino

Le mouseleave est inutile : hover gère à la fois le mouseenter et le mouseleave.
Si tu ne lui passes qu'une fonction en paramètre, elle sera exécutée pour chacun des deux événements, si tu en passes deux, elles seront appelées alternativement.

Citation:

Envoyé par Bovino

Le mouseleave est inutile : hover gère à la fois le mouseenter et le mouseleave.
Si tu ne lui passes qu'une fonction en paramètre, elle sera exécutée pour chacun des deux événements, si tu en passes deux, elles seront appelées alternativement.

ok merci je ne savai pas, c'est corrigé :
Code:

1 2 3 4 5 6 7 8 9 10 11 <script type="text/javascript"> $(document).ready(function(){ $('#englobhover span').hide(); $('#product_list li').hover (function(){ $(this).find('h3 span').fadeToggle(500); }); return false; }); </script>