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>