私のアニメーションのjQuery不透明度が機能していません

Question

idが1と2のdivをアニメーション化したいときに、それらを上に置くと、テキストの不透明度が下がります。 何らかの理由でテキストがアニメーションも実際の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"}); 
    }); 
});