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');
                    });
            });

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.