# animateが無限ループするJavaScript 下記のコードを適当なテキストエディタに張り付けて.htmlファイルとして保存し，その後ブラウザで開いてください． マウスオーバーしたときに無限ループが発生します． ```htmlembedded= <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>無限ループするanimate</title> <style> #buttons2 button p:first-child { position: absolute; } #buttons2 button p:nth-child(2) { opacity: 0; } </style> <script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> </head> <body> <div id="buttons2"> <button> <p>hogehoge</p> <p>mokemoke</p> </button> </div> <script> var duration = 300; $('#buttons2 button') .on('mouseover', function(){ var $btn = $(this); $btn.animate ({ backgroundColor: '#faee00', color: '#000' }, duration); $btn.find('p:first-child').animate({opacity: 0}, duration); $btn.find('p:nth-child(2)').animate({opacity: 1}, duration); }) .on('mouseout', function(){ var $btn = $(this); $btn.animate({ backgroundColor: '#fff', color: '#01b169', }, duration); $btn.find('p:first-child').stop(true).animate({opacity: 1}, duration); $btn.find('p:nth-child(2)').stop(true).animate({opacity: 0}, duration); }); </script> </body> </html> ```