Clignotant une div avec la couleur d'arrière-plan en jquery en utilisant la méthode setInterval

le code :

<div id="divtoBlink" ></div>

css:

#divtoBlink{
 width:100px;
 height:20px;
 background-color:#627BAE;
}

javascript:

setInterval(function(){
  $("#divtoBlink").css("background-color","red");
  },100)

mais rien ne se passe quelqu'un peut me dire ce que je fais de mal ?

violon Ici

OriginalL'auteur Sora | 2013-09-27

31

Je vous suggère de ne pas changer la couleur avec javascript. Il est préférable de le faire via le CSS. Le changement de styles qui devrait être fait dans une feuille de style, pas de javascript (dans le cas d'autres/de plus les propriétés changé).

Vous pouvez basculer d'une classe, la classe a un arrière-plan de définition (dans cet exemple, si vous voulez, vous pouvez ajouter plus de propriétés). Un violon de DÉMONSTRATION
```
<div id="divtoBlink" ></div>

.backgroundChange{
    background: red;
}

let $div2blink = $("#divtoBlink"); //Save reference for better performance
let backgroundInterval = setInterval(function(){
    $div2blink.toggleClass("backgroundChange");
 },100)
```
Si vous vous sentez comme une humeur sauvage, vous pouvez ajouter un peu de css3 animation à
```
#div2blink{
    transition: backgroundColor 0.05s ease-in-out;
}
```
Fait une démonstration de l'animation: DÉMO (j'ai de la ralentir dans l'exemple!)

veuillez fournir le code complet pour une animation (keyframes etc), si vous parlez d'un
Les images clés ne sont pas nécessaires dans ce cas. Malade de faire un exemple pour vous
ensuite, utilisez transition comme css animation se réfère à une autre technique
je vous remercie pour votre question qui ce que je cherchais
J'ai ajouté une démo pour l'animation. @Sora: Vous utilisez clearInterval(), je l'ai ajouté à mon code comment vous l'enregistrez, vous comprendre comment l'effacer 😉

OriginalL'auteur Martijn
7

DÉMO
```
setInterval(function () {
    $("#divtoBlink").css("background-color", function () {
        this.switch = !this.switch
        return this.switch ? "red" : ""
    });
}, 100)
```
Cette clignote entre les deux couleurs définies qui pourrait ne pas être optimale. Vous devriez (idéalement) de ne pas utiliser JS pour contrôler les couleurs, c'est ce que css est 🙂
this.switch peut-être pas évident pour les débutants, on peut utiliser une approche globale (ou du parent fermeture) de la variable pour la commutation
J'aime la ce.changer, comme puissant puisqu'il est simple
je suis juste de répondre à la question, pas de l'optimisation de code qui de toute façon, et je ne sais attente exacte
Vous pouvez modifier la valeur hexadécimale à "", elle va le faire basculer au lieu d'une couleur fixe

OriginalL'auteur A. Wolff

Encore un autre exemple, mais avec beaucoup de couleur et de la vitesse (basé sur martijn exemple). Avertissement sur l'epilepsie:

var $div2blink = $("#divtoBlink"); //Save reference, only look this item up once, then save
var color = 0
var color_classes = ["backgroundRed", "backgroundYellow", "backgroundBlue"];
var backgroundInterval = setInterval(function(){
        color++;
    if (color === 3){
        color = 0;
    }
    $div2blink.toggleClass(color_classes[color]);
 },10)

http://jsfiddle.net/LkuNB/1983/

OriginalL'auteur mrtobo

Vous pouvez aussi le faire avec de la pure CSS:

#divtoBlink{
    -webkit-animation: bgblink 3s;  /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite;  /* Chrome, Safari, Opera */
}
@-webkit-keyframes bgblink {
    from {background-color: #fff;}
    50% {color:#000}
    to {background-color: #fff;}
}
@keyframes bgblink {
    from {background-color: #fff;}
    50% {background-color:#000}
    to {background-color: #fff;}
}

OriginalL'auteur Adam Genshaft

1

Veuillez consulter ci-dessous le code

HTML:
```
<div id="divtoBlink" ></div>
```
CSS:
```
#divtoBlink{
 width:100px;
 height:20px;
background-color:#627BAE;
}

.class2{
     background-color:#ff0000 !important;
}
```
JS :
```
setInterval(function(){
  $("#divtoBlink").toggleClass("class2");
  },100)
```
Si cela fonctionne, class1 n'est pas du tout nécessaire. Ajoutez le code pour #divtoBlink. Permettra de sauver et d'améliorer la lisibilité du code
Changé comme par vos commentaires mais faut cocher"!important " pour la classe de valeur afin qu'il remplace la valeur de l'ID.

OriginalL'auteur Ganesh Pandhere
-1

Essayez ceci pour changer la couleur d'un temps de "rouge", modifiez la couleur d'arrière-plan à backgroundColor
```
setInterval(function(){
$("#divtoBlink").css("backgroundColor","red");
},100)
```
Si vous souhaitez activer la classe, que vous avez à faire avec .bascule

Ceci permettra de définir les backgroundcolor de rouge, toutes les 100ms. Rien ne permet de basculer ou de modifier, seulement après la première illiteration (réglage en rouge)
C'est ce que j'ai dit, si vous voulez l'activer, il fallait mettre le "toggle". J'ai aussi dit que l'exemple ci-dessus ne changer qu'une seule fois!
Si vous savez seulement une fois, pourquoi un intervalle? Qui n'a aucun sens 😛

OriginalL'auteur Zwen2012

Vous devez vous connecter pour publier un commentaire.