Problème bouton JS/CSS

Résolu

gmatg -
gmatg - 19 mai 2020 à 16:18

Salut à tous ! !
J'ai un petit problème tout bête. Après beaucoup de recherches, je n'ai rien trouvé.
J'aimerai que lorsque je ferme un bouton "div" qui affiche plusieurs images, ces image disparaissent pas de façon nette, mais "progressif". Peut-être avec une fonction CSS mais ... je ne sais pas.
Merci à vous pour votre aide extraordinaire !

Afficher la suite

A voir également:

Problème bouton JS/CSS
Diagnostic bouton photo - Accueil - Outils
Bouton reinitialisation pc - Guide
Bouton on/off comment savoir ✓ - Forum Matériel & Système
Symbole arrêt marche - Forum Word
Réinitialiser chromecast sans bouton - Guide

6 réponses

Réponse 1 / 6

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Bonjour,

Tu vas pouvoir utiliser un mix de css (en jouant, par exemple, sur l'opacity ) et de javascript.
Par exemple :

function fade(element) {
    var op = 1;  // initial opacity
    var timer = setInterval(function () {
        if (op <= 0.1){
            clearInterval(timer);
            element.style.display = 'none';
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op -= op * 0.1;
    }, 50);
}

Réponse 2 / 6

gmatg

Salut
Merci pour ta réponse, qui je suis sure marche ! Mais mon niveau de JS ne suffit pas je pense ...
J'ai déjà un bout de code JS pour faire fonctionner mon bouton "div". Mais du coup, comment faire pour mixter les deux codes ?
Merci à vous tous

      <div class="contaner" id="icon">
        <div class="button pointer">Pour nous suivre</div>
        <div class="social twitter"><img src="Icon/insta.png" class="icon1" /><a href="..." target="_blank"><i class="fa fa-twitter"></i></a></div>
        <div class="social facebook"><img src="Icon/facebook1.png" class="icon1" /><i href="..." class="fa fa-facebook"></i></div>
        <div class=" social google"><img src="Icon/twitter1.png" class="icon1" /><i  href="..." class="fa fa-google-plus"></i></div>
        <div class="social youtube"><img src="Icon/gmail1.png" class="icon1" /><a href="..." target="_blank"><i class="fa fa-youtube"></i></a></div>
      </div>

$(".button").click(function(){
  $(".social.twitter").toggleClass("clicked");
  $(".social.facebook").toggleClass("clicked");
 $(".social.google").toggleClass("clicked");
 var elmt = document.getElementById("icon");
 elmt.opacity = 0.3;
  $(".social.youtube").toggleClass("clicked");
})

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Visiblement tu utilises du jquery
Donc, il est possible d'utiliser la fonction fadeOut()
https://api.jquery.com/fadeout/
par exemple

  $( ".icon1" ).fadeOut( "slow") ;

Réponse 3 / 6

gmatg

Merci pour ta réponse, j'ai essayer avec cette méthode mais encore un échec. SI quelqu’un peut m'aider, je suis volontier.

$(".button").click(function(){
  $(".social.twitter").toggleClass("clicked");
  $(".social.facebook").toggleClass("clicked");
 $(".social.google").toggleClass("clicked");
 var elmt = document.getElementById("icon");
 elmt.opacity = 0.3;
  $(".social.youtube").toggleClass("clicked");
})

$( "#opaque" ).click(function() {
  $( "#clickme" ).fadeOut( "slow", function() {
  });
});

      <div class="contaner" id="opaque">
        <div class="button pointer">Pour nous suivre</div>
        <div id="clickme" class="social twitter"><img src="Icon/insta.png" class="icon1" /><a href="..." target="_blank"><i class="fa fa-twitter"></i></a></div>
        <div id="clickme" class="social facebook"><img src="Icon/facebook1.png" class="icon1" /><i href="..." class="fa fa-facebook"></i></div>
        <div id="clickme" class=" social google"><img src="Icon/twitter1.png" class="icon1" /><i  href="..." class="fa fa-google-plus"></i></div>
        <div id="clickme" class="social youtube"><img src="Icon/gmail1.png" class="icon1" /><a href="..." target="_blank"><i class="fa fa-youtube"></i></a></div>
      </div>

Merci de vos réponses

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

un ID ( comprendre IDENTIFIANT) se doit d'être UNIQUE.
Tu ne peux pas avoir le même ID pour 4 div....

Si tu veux cibler plusieurs éléments en même temps.. tu peux te baser sur une class
Dans le code que tu nous montres, par exemple, tu pourrais utiliser la class "social"
Et pourquoi l'avoir mis sur un onclick différent ? Pourquoi ne pas l'avoir attaché au code déjà existant ?
Un truc du genre

$(".button").click(function(){
  $(".social.twitter").toggleClass("clicked");
  $(".social.facebook").toggleClass("clicked");
 $(".social.google").toggleClass("clicked");
 var elmt = document.getElementById("icon");
 elmt.opacity = 0.3;
  $(".social.youtube").toggleClass("clicked");
  
  $( ".social" ).fadeOut( "slow");

})

Réponse 4 / 6

sacapuss

Bonsoir,

voilà comment je ferais :
<div id="madiv">ddd</div>
<button onclick="document.getElementById('madiv').style.opacity=0;">xxx</button>
<style> #madiv { transition:opacity 1s; }</style>

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 6

gmatg

Salut
Merci beaucoup pour ta réponse qui fonctionne à merveille
A bientôt et encore merci

sacapuss2 Messages postés 26 Date d'inscription Statut Membre Dernière intervention 2

Bonsoir, gmatg, qu'as-tu choisi, finalement, comme solution ?

gmatg > sacapuss2 Messages postés 26 Date d'inscription Statut Membre Dernière intervention

Salut ! j'ai finalement choisi ta solution, qui marche parfaitement. Merci beaucoup

Réponse 6 / 6

sacapuss2 Messages postés 26 Date d'inscription Statut Membre Dernière intervention 2

J'anime un webinaire vingtomadaire : Introduction au développement web. La prochaine séance aura lieu samedi 30 mai, de 14 heures à 18 heures.

Les thèmes disponibles sont les suivants :

Mon premier site web, première partie : le moteur;
mon premier site web, seconde partie : la personnalisation;
introduction au langage Php : l'exemple de la création du site web;
le langage JavaScript : quelques applications;
un élément ubiquitaire : le formulaire (Php, Html, Css, JavaScript);
un objet ubiquitaire : le requêteur;
introduction aux Cascading Style Sheets, le langage de style du web;
le site à navigation différenciée, ou single-page website.

Si vous prévoyez de participer samedi 30 mai, merci de bien vouloir voter pour le thème que vous souhaiteriez voir travaillé, https://labo.doobee.fr

Discussions similaires

Où est la touche SHIFT sur mon clavier d'ordi ?

Bouton ON OFF, O ou I ?

Quel est la touche shift sur le clavier

ou est la touche shift sur un clavier

Touche "home" sur pc portable.

Votre réponse

Discussions similaires