Le .css en jQuery

 La fonction .css en jQuery

See the Pen Higlight div with jquery by yuyazz (@yuyazz) on CodePen.


Aujourd’hui on va voir l’effet .css en jquery, qui permet d’appliquer facilement du style à nos éléments en fonction d’une action particulière. Dans ma page html, j’importe plusieurs images en leur attribuant une classe, puis je place deux boutons, contenant chacun un id. Ici je n’ai que deux images pour l’exemple, mais on pourrait pour un portfolio par exemple en mettre plusieurs.



     <!------------------------------------------PAGE IMAGE PORTFOLIO---------------------------------------------->
        <div>
            <button id="sports">sports </button>
            <button id="people">people</button>

            <img src="http://lorempixel.com/400/200/sports/" alt="" class="sports">
    

            <img src="http://lorempixel.com/400/200/people/" alt="" class="people">
           
        </div>

Et en jquery, on applique notre fonction .css pour agir sur le css de chaque groupe d’image : on définit une opacité par défaut à toutes les images, puis avec la fonction .not on dit : tout ce qui n’a pas la classe .people ou .sports aura une opacité de 0.5. Ceci nous permet d’appliquer un style à notre portfolio et de mettre en valeur certains éléments.

  $(document).ready(function() {
                $('#people').click(function() {
                    $('img').css('opacity', '1');
                    $('img').not('.people').css('opacity', '0.5');
                });

                    $('#sports').click(function() {
                        $('img').css('opacity', '1');
                        $('img').not('.sports').css('opacity', '0.5');
                    });
            });

Mis à jour le Par Copier coller | Dans jQuery