Effet opacity mouseover

zenkiai
Javascript

Bonjour,
Sur mon site, dans l'index des articles ils sont tous en opacity 0.5, lorsqu'on survol un article il se met en opacity 1.
Voici mon code JS :

$('#text<?php echo $v'id']; ?>').hover(function(){
            $('.text<?php echo $v'id']; ?>').addClass('opacityClass');   
        },function(){
            $('.text<?php echo $v'id']; ?>').removeClass('opacityClass');   
        });

J'aime beaucoup l'effet de Grafikart (comme d'hab), celui qui lorsque l'on survol un tuto ce sont les autres qui passent en opacity 0.5.
J'ai essayé de l'appliquer sur mon site mais je n'y arrive pas.
Voici le shéma de structure de mes articles : 

<a href="<?php echo $this->Html->url($v'link']); ?>">
    <div class="article">
        <?php echo $this->Html->image(sprintf($v'thumbf'],220,113)); ?>
    </div>
</a>

Comment faites vous pour faire cet effet ?

Merci

7 réponses

Shadow
Réponse acceptée

Bonjour, et de rien pour les solutions ;)

pour réécrire la solution première avec des classes plutôt que du css (sans animation donc...), essaye cela :

$(".article-element")
    .bind('mouseover', function() {
        $(".article-element").not($(this)).addClass('opacityClass');
        $(this).removeClass('opacityClass');
    })
    .bind('mouseout', function() {
        $(".article-element").removeClass('opacityClass');
    });

Tiens moi au courant du résultat ;)

Shadow

Bonjour,

Pour cette effet il a plein de façon de le réaliser ... Ma version serais celle-ci :

En supposant une structure Html telle que celle-ci (la plus proche de ta version sans le php) :

<div id="list-article-wrapper">
    <a href="#">
        <div class="article-element">
            <img src="img.jpg" alt="mon image">
        </div>
    </a>
    <a href="#">
        <div class="article-element">
            <img src="img.jpg" alt="mon image">
        </div>
    </a>
    <a href="#">
        <div class="article-element">
            <img src="img.jpg" alt="mon image">
        </div>
    </a>
    <a href="#">
        <div class="article-element">
            <img src="img.jpg" alt="mon image">
        </div>
    </a>
</div>

Le code jQuery pourrait ressembler à cela (effet hover simple) : 

$(".article-element")
    .bind('mouseover', function() {
        $(".article-element").not($(this)).css({ opacity: .5 });
    })
    .bind('mouseout', function() {
        $(".article-element").css({ opacity: 1 });
    });

Ou avec un petit effet (Attention : il perd pied dès qu'on va trop vite avec :P lol) : 

$(".article-element")
    .bind('mouseover', function() {
        $(".article-element").not($(this)).animate({ opacity: .6 }, 180, function() {
            $(this).stop();
        });
    })
    .bind('mouseout', function() {
        $(".article-element").animate({ opacity: 1 }, 180, function() {
            $(this).stop();
        });
    });

C'était l'effet souhaité ? :)

zenkiai
Auteur

Merci Shadow pour ta solution.
La première solution proposée fonctionne très bien. Cependant la deuxième solution bug, même en allant doucement.
J'aimerais avoir un petit effet de transition comme pour la deuxième solution. J'avais pensé réécrire ta solution première mais au lieu de lui donner un css, je lui aurais donné une class avec une transition. Mais je n'y arrive pas. En effet en mettant un addClass, je dois mettre un removeClass pour que cela fonctionne, n'étant pas un adepte en Jquery, je dois mal écrire le code.
merci de ton aide

zenkiai
Auteur

Merci Shadow, cela fonctionne très bien maintenant.
En mettant plutôt une class, j'ai pu mettre une propriété transition-duration qui permet d'avoir l'effet de fondu sans bug.

Shadow

Ce fut un plaisir ;) n'hésite pas a revenir vers moi au besoin.

CMB

Bonsoir,

j'ai le même souci, la solution de shadow marche nickel mais j'aimerai rajouter un fadeIn sur l'effet, pouvez vous m'aider?
Merci

CMB

Je pense avoir trouvé la solution mais j'aimerai votre avis pour savoir si y a plus fiable :
<code>
jQuery(".box-homepage")
.bind('mouseover', function() {
jQuery(".box-homepage").not($(this)).fadeTo('slow', 0.5);
})
.bind('mouseout', function() {
jQuery(".box-homepage").fadeTo('slow', 1);
});
</code>