Моя анимация jQuery непрозрачность не работает

Question

Я хочу анимировать divs с идентификатором 1 и 2, когда они зависают, непрозрачность текста уменьшается. По какой-то причине ни текст не анимируется, ни фактический div.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
//THIS IS HOW A FADED IN AND OUT BUTTON WORKS 
 $(document).ready(function(){ 
      $("1").mouseover(function(){ 
        $("1").filter(':not(:animated)').animate({opacity: ".7"}); 
      }); 
      $("1").mouseout(function(){ 
        $("1").animate({opacity: "1"}); 
      }); 
      $("2").mouseover(function(){ 
        $("2").filter(':not(:animated)').animate({opacity: ".7"}); 
      }); 
      $("2").mouseout(function(){ 
        $("2").animate({opacity: "1"}); 
      }); 
    }); 

Answer 1

Попробуйте это, вам не хватает # в селекторной части.

$(document).ready(function(){ 
    $("#1").mouseover(function(){ 
    $("#1").filter(':not(:animated)').animate({opacity: ".7"}); 
    }); 
    $("#1").mouseout(function(){ 
    $("#1").animate({opacity: "1"}); 
    }); 
    $("#2").mouseover(function(){ 
    $("#2").filter(':not(:animated)').animate({opacity: ".7"}); 
    }); 
    $("#2").mouseout(function(){ 
    $("#2").animate({opacity: "1"}); 
    }); 
});