Problème bouton JS/CSS [Résolu]

Signaler
-
 gmatg -
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 !

6 réponses

Messages postés
28950
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 juillet 2020
2 615
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);
}

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");
})
Messages postés
28950
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 juillet 2020
2 615
Visiblement tu utilises du jquery
Donc, il est possible d'utiliser la fonction fadeOut()
https://api.jquery.com/fadeOut/
par exemple
  $( ".icon1" ).fadeOut( "slow") ;
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
Messages postés
28950
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 juillet 2020
2 615
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");

})


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>
Salut
Merci beaucoup pour ta réponse qui fonctionne à merveille
A bientôt et encore merci
Messages postés
27
Date d'inscription
mardi 9 août 2011
Statut
Membre
Dernière intervention
21 mai 2020
2
Bonsoir, gmatg, qu'as-tu choisi, finalement, comme solution ?
>
Messages postés
27
Date d'inscription
mardi 9 août 2011
Statut
Membre
Dernière intervention
21 mai 2020

Salut ! j'ai finalement choisi ta solution, qui marche parfaitement. Merci beaucoup
Messages postés
27
Date d'inscription
mardi 9 août 2011
Statut
Membre
Dernière intervention
21 mai 2020
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