Sujet Précédent Sujet Suivant

Problème bouton JS/CSS

Résolu/Fermé
gmatg - 6 mai 2020 à 11:58
 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 !

6 réponses

Réponse 1 / 6
jordane45 Messages postés 38392 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 23 janvier 2025 4 731
6 mai 2020 à 12:03
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);
}

0
Réponse 2 / 6
gmatg
6 mai 2020 à 12:11
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");
})
0
jordane45 Messages postés 38392 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 23 janvier 2025 4 731
6 mai 2020 à 13:40
Visiblement tu utilises du jquery
Donc, il est possible d'utiliser la fonction fadeOut()
https://api.jquery.com/fadeout/
par exemple 
  $( ".icon1" ).fadeOut( "slow") ;
0
Réponse 3 / 6
gmatg
Modifié le 6 mai 2020 à 18:38
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
0
jordane45 Messages postés 38392 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 23 janvier 2025 4 731
7 mai 2020 à 10:01
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");

})
0
Réponse 4 / 6
sacapuss
6 mai 2020 à 19:16
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>
0

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

Posez votre question
Réponse 5 / 6
gmatg
18 mai 2020 à 11:49
Salut
Merci beaucoup pour ta réponse qui fonctionne à merveille
A bientôt et encore merci
0
sacapuss2 Messages postés 26 Date d'inscription mardi 9 août 2011 Statut Membre Dernière intervention 21 mai 2020 2
18 mai 2020 à 19:20
Bonsoir, gmatg, qu'as-tu choisi, finalement, comme solution ?
0
gmatg > sacapuss2 Messages postés 26 Date d'inscription mardi 9 août 2011 Statut Membre Dernière intervention 21 mai 2020
19 mai 2020 à 16:18
Salut ! j'ai finalement choisi ta solution, qui marche parfaitement. Merci beaucoup
0
Réponse 6 / 6
sacapuss2 Messages postés 26 Date d'inscription mardi 9 août 2011 Statut Membre Dernière intervention 21 mai 2020 2
Modifié le 19 mai 2020 à 13:54
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
0

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
Quel est la touche shift sur le clavier
paoade -
PRIPRI -

8 réponses
ou est la touche shift sur un clavier
Mathis -
Maelstrom -

4 réponses
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
symbole arrêt marche
strumpfi -
Raymond PENTIER -

2 réponses