2

Tengo 4 botones para el juego Simon dice. Quiero que cada vez que tenga el mouse sobre un boton, su opacidad cambie. El problema es que esto sucede solo si el boton no fue animado todavía. Una vez que el boton es animado al azar, ya no cambia mas su opacidad si dejo el mouse quieto sobre el boton.

var arr=[];
var arr2=[];

pushRand();

$("#b1").click(function(){
  
  arr2.push(1);
 
   if(compareArr(arr,arr2)&&arr.length===arr2.length){ 
       pushRand();
       arr2=[];
   }
   else if(!compareArr(arr,arr2)&&arr.length===arr2.length){
       alert("You lose :( ..");
       $("button").unbind();    
   }  
});

$("#b2").click(function(){
  
  arr2.push(2);
  if(compareArr(arr,arr2)&&arr.length===arr2.length){ 
    pushRand();
    arr2=[];
  }
  else if(!compareArr(arr,arr2)&&arr.length===arr2.length){
    alert("You lose :( ..");
    $("button").unbind();    
  }  
});

$("#b3").click(function(){
  
  arr2.push(3);
 
   if(compareArr(arr,arr2)&&arr.length===arr2.length){ 
      pushRand();
      arr2=[];
   }
   else if(!compareArr(arr,arr2)&&arr.length===arr2.length){
      alert("You lose :( ..");
      $("button").unbind();    
   }  
});


$("#b4").click(function(){
  
  arr2.push(4);
   if(compareArr(arr,arr2)&&arr.length===arr2.length){ 
      pushRand();
      arr2=[];
   }
   else if(!compareArr(arr,arr2)&&arr.length===arr2.length){
     alert("You lose :( ..");
     $("button").unbind();    
   }  
});

function pushRand(){  
   var rand=Math.floor(Math.random()*4+1);
   arr.push(rand);
   $("#b"+rand).animate({ opacity: "1" }, 600 ).animate({ opacity: "0.2" }, 600);    
}

function compareArr(a, b) {
    var i = a.length;
    if (i != b.length) return false;
    while (i--) {
        if (a[i] !== b[i]) return false;
    }
    return true;
}
button{
  opacity:0.2;
  height:80px;
  width:80px;
}

button:hover{
  opacity:1; 
}

#b1{  
  background:green;  
}

#b2{  
  background:red;  
}

#b3{  
  background:yellow;  
}

#b4{  
  background:blue;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b1"type="button" class="btn">         </button>
<button id="b2"type="button" class="btn">      </button>
<button id="b3" type="button" class="btn">         </button>
<button id="b4" type="button" class="btn">           </button>

4 respuestas 4

1

Aquí lo que está sucediendo es que al animar el elemento estás agregando la propiedad opacity en línea, el código de tu botón queda así:

<button id="b3" type="button" class="btn" style="opacity: 0.2;">

Mientras que los que no se han animado quedan así:

<button id="b2" type="button" class="btn">

Por lo tanto el CSS externo actúa en los elementos que NO tienen esa propiedad definida y respeta a los que ya la tienen definida; tu elemento animado en este caso.

Para cambiar este comportamiento es necesario decirle al CSS externo que nuestra regla es la de mayor importancia agregando !important:

button:hover{
  opacity:1 !important;
}

Con esto tu elemento se comportará de la manera en la que esperas que lo haga.

0

El problema que tienes se debe a que la función animate te introduce los estilos inline en tu código HTML. Por lo tanto, como el código inline tiene una mayor especificidad que los selectores de título (en este caso button) es por eso que cuando pasas por encima no se muestra el código CSS que tienes en el hover, porque los estilos inline sobrescriben dicho código.

Una solución rápida pero muy sucia y que te desaconsejo completamente sería usar el atributo !important aunque es un atributo que deberías evitar siempre. Siempre es mucho mejor utilizar la especificidad del CSS.

Por eso, te voy a proponer una solución alternativa al atributo !important y a tu función animate tomando como referencia la especificidad del CSS.

Para tu propósito lo que puedes realizar es utilizar el atributo animation y utilizar keyframes. He aumentado la duración (de 0.6s que tenías en tu código a 2s para que el efecto se vea bien).

.transicion{
  animation: animacion 2s;
}

@keyframes animacion {
    0% { opacity: 0.2;}
    50% { opacity: 1;}
    100% { opacity: 0.2;}
}

Y posteriormente agregar la clase correspondiente al elemento que quieres animar mediante la función addClass:

$("#b"+rand).addClass('transicion');

Por lo tanto, al haberle añadido una clase que simplemente es una animación durante 2s, los estilos de esta no afectarán al hover que tienes en cada uno de los botones.

Tu ejemplo modificado:

var arr=[];
var arr2=[];

pushRand();

$("#b1").click(function(){
  
  arr2.push(1);
 
   if(compareArr(arr,arr2)&&arr.length===arr2.length){ 
    pushRand();
    arr2=[];
  }
  else if(!compareArr(arr,arr2)&&arr.length===arr2.length){
    alert("You lose :( ..");
    $("button").unbind();  
  }  
});


$("#b2").click(function(){
  arr2.push(2);
  if(compareArr(arr,arr2)&&arr.length===arr2.length){ 
    pushRand();
    arr2=[];
  }
  else if(!compareArr(arr,arr2)&&arr.length===arr2.length){
    alert("You lose :( ..");
    $("button").unbind();    
  }  
});

$("#b3").click(function(){  
  arr2.push(3);
 
   if(compareArr(arr,arr2)&&arr.length===arr2.length){ 
      pushRand();
      arr2=[];
   }
   else if(!compareArr(arr,arr2)&&arr.length===arr2.length){
      alert("You lose :( ..");
      $("button").unbind(); 
   } 
});


$("#b4").click(function(){
  
  arr2.push(4);
   if(compareArr(arr,arr2)&&arr.length===arr2.length){ 
      pushRand();
      arr2=[];
   }
   else if(!compareArr(arr,arr2)&&arr.length===arr2.length){
      alert("You lose :( ..");
      $("button").unbind();  
   }  
});

function pushRand(){
   var rand=Math.floor(Math.random()*4+1);
   arr.push(rand);
   $("#b"+rand).addClass('transicion'); 
}


function compareArr(a, b) {
    var i = a.length;
    if (i != b.length) return false;
    while (i--) {
        if (a[i] !== b[i]) return false;
    }
    return true;
}
button{
  opacity:0.2;
  height:80px;
  width:80px;
}


button:hover{
  opacity:1; 
}

#b1{
  background:green;
}

#b2{ 
  background:red; 
}

#b3{
  background:yellow; 
}

#b4{  
  background:blue;  
}

.transicion{
  animation: animacion 2s;
}
  

@-webkit-keyframes animacion {
    0% { opacity: 0.2;}
    50% { opacity: 1;}
    100% { opacity: 0.2;}
}

@-moz-keyframes animacion {
    0% { opacity: 0.2;}
    50% { opacity: 1;}
    100% { opacity: 0.2;}
}

@-o-keyframes animacion {
    0% { opacity: 0.2;}
    50% { opacity: 1;}
    100% { opacity: 0.2;}
}

@keyframes animacion {
    0% { opacity: 0.2;}
    50% { opacity: 1;}
    100% { opacity: 0.2;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b1"type="button" class="btn">         </button>
<button id="b2"type="button" class="btn">      </button>
<button id="b3" type="button" class="btn">         </button>
<button id="b4" type="button" class="btn">           </button>

0

Solo añade !important a tu css:

button:hover{
  opacity:1 !important;
}
0

Para realizar este tipo de transiciones, te sugiero separar cada parte de los estilos, en clases. Por ejemplo, una clase para cuando el botón está con 0.2 de opacidad, otra para cuando está en 1 etc..., de modo que no tengas que aplicar una animación directa con jquery, sino que lo hagas con css directamente cambiando simplemente la clase a la que pertenece el botón que selecciones para realizar la animación. Esto lo puedes hacer agregandole al botón la propiedad transition de la siguiente forma:

button {
    ...
    transition: opacity 600ms;
    ...
}

Esto le dice al navegador que quieres que la opacidad, siempre que varíe, que lo haga transitivamente en un tiempo de 600 milisegundos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.