Here's all the javascript. Please \*refactor\* it to make it cleaner and easier to read, but don't change any functionality
 $(function () {
 // Store the original positions of the draggable images when the window is loaded
 $('.draggable-image').each(function () {
 $(this).data('originalPosition', $(this).position());

 // Check if the element has the .quad-rotating-image class
 if ($(this).hasClass('quad-rotating-image')) {
 // Add the CSS class that applies the animation
 $(this).addClass('quad-rotating-animation');
 }
 });

 // Make the images draggable
 $('.draggable-image').draggable({
 snap: '.hidden-character-image, .lightbox',
 drag: function (event, ui) {
 // Get the current transformation matrix
 var transformMatrix = $(this).css('transform');

 // Apply the transformation matrix to the helper element used for dragging
 ui.helper.css('transform', transformMatrix);
 }
 }).dblclick(function () {
 // Get the original position
 var originalPosition = $(this).data('originalPosition');

 // Move the draggable image back to its original position with a 2-second tween
 $(this).animate({
 top: originalPosition.top,
 left: originalPosition.left
 }, 1000);
 });
 });

 var stop\_wiggle = false;
 // Reset all quad-rotating-image elements' positions when reset-all-rotaters-button is clicked
 $('.reset-all-rotaters-button').click(function () {
 $('.quad-rotating-image').each(function () {
 // Get the original position
 var originalPosition = $(this).data('originalPosition');

 // Move the draggable image back to its original position with a 2-second tween
 $(this).animate({
 top: originalPosition.top,
 left: originalPosition.left
 }, 1000);
 });
 });


 // Add the 'inactive\_button' class to the buttons initially
 $('.reset-all-rotaters-button, .reset-all-hidden-characters-button').addClass('inactive\_button');

 // Modify the draggable() method to remove the 'inactive\_button' class when an image is dragged
 $('.draggable-image').draggable({
 snap: '.draggable-image, .lightbox .rot-image-container',
 start: function () {
 // Stop the wiggle animation when the element is clicked or touched
 if ($(this).hasClass('wiggly-image')) {
 stop\_wiggle = true;
 }
 },
 drag: function (event, ui) {
 // Get the current transformation matrix
 var transformMatrix = $(this).css('transform');

 // Apply the transformation matrix to the helper element used for dragging
 ui.helper.css('transform', transformMatrix);

 // Remove the 'inactive\_button' class from the buttons
 $('.reset-all-rotaters-button, .reset-all-hidden-characters-button').removeClass('inactive\_button');
 },
 stop: function () {
 // Remove the 'inactive\_button' class from the buttons when dragging stops
 $('.reset-all-rotaters-button, .reset-all-hidden-characters-button').removeClass('inactive\_button');
 },
 });

 // // Add a function to hide the buttons after resetting positions
 // function hideResetButtons() {
 // $('.reset-all-rotaters-button, .reset-all-hidden-characters-button').hide();
 // }

 // // Call the hideResetButtons function after resetting positions
 // $('.reset-all-rotaters-button').click(function () {
 // $('.reset-all-rotaters-button').promise().addClass('inactive\_button');
 // // $('.reset-all-rotaters-button').addClass('inactive\_button');
 // });

 // $('.reset-all-hidden-characters-button').click(function () {
 // $('.hidden-character-image').promise().done('inactive\_button');

 // });






 // Reset all hidden-character-image elements' positions when reset-all-hidden-characters-button is clicked
 $('.reset-all-hidden-characters-button').click(function () {
 $('.reset-all-hidden-characters-button').addClass('inactive\_button');
 $('.hidden-character-image').each(function () {
 // Get the original position
 var originalPosition = $(this).data('originalPosition');

 // Move the draggable image back to its original position with a 2-second tween
 $(this).animate({
 top: originalPosition.top,
 left: originalPosition.left
 }, 1000);
 });
 });

 $('.reset-all-rotaters-button').click(function () {
 $('.reset-all-rotaters-button').addClass('inactive\_button');
 });

 // ... (rest of your code)

 //Make the draggable images wiggle, indicating they should be click/dragged!
 function startWiggle(intervalTime) {
 setInterval(function () {
 if (stop\_wiggle) {
 return;
 }

 // Get all the wiggly images
 var images = $('.wiggly-image');

 // Generate a random index
 var randomIndex = Math.floor(Math.random() \* images.length);

 // Get the random wiggly image
 var randomImage = images.eq(randomIndex);

 if (Math.random() > .5) {
 // Apply the wiggle animation to the random image
 randomImage.css('animation', 'wiggle .5s');
 randomImage.one('animationend', function () {
 // Remove the wiggle animation after it finishes
 randomImage.css('animation', '');
 });
 }
 }, intervalTime);

 }
 // Start the wiggle animation with an interval time of 5000 milliseconds (5 seconds)
 setTimeout(() => {
 startWiggle(500);
 }, 500); //wait 500ms first so the initial pos of the character images isn't corrupted if its animated by coincidence on the first frames
 // Make all flippy images zoomable
 $(".image-container img").wrap(function () {
 return $("", {
 href: this.src,
 // Set the target attribute to "\_blank" to open in a new tab
 target: "\_blank"
 });
 });

 // Smooth scrolling effect for all links with class "scroll-to"
 $(document).ready(function () {
 // Listen for clicks on elements with the class "scroll-to"
 $('.scroll-to').click(function () {
 // Animate the scrolling to the target element
 $('html, body').animate({
 scrollTop: $($(this).attr('href')).offset().top // Get the target element's position from the href attribute
 }, 500); // 500ms animation duration

 // Prevent the default link behavior
 return false;
 });
 });
여기 모든 자바스크립트가 있습니다. 더 깔끔하고 읽기 쉽도록 리팩터링하되, 기능을 변경하지 마세요. (function () { // 창이 로드될 때 드래그 가능한 이미지의 원래 위치를 저장합니다. $('.draggable-image').each(function () { $(this).data('originalPosition', $(this).position()); // 요소에 .quad-rotating-image 클래스가 있는지 확인합니다. if ($(this).hasClass('quad-rotating-image')) { // 애니메이션을 적용하는 CSS 클래스를 추가합니다. $(this).addClass('quad-rotating-animation'); } }); // 이미지를 드래그 가능하게 만들기 ('.draggable-image').draggable({ snap: '.hidden-character-image, .lightbox', drag: function (event, ui) { // 현재 변환 행렬을 가져옵니다. var transformMatrix = $(this).css('transform'); // 드래그에 사용되는 도우미 요소에 변환 행렬을 적용합니다. ui.helper.css('transform', transformMatrix); } }).dblclick(function () { // 원래 위치 가져오기 var originalPosition = $(this).data('originalPosition'); // 드래그 가능한 이미지를 2초 간격으로 원래 위치로 이동합니다. (this).animate({ top: originalPosition.top, 왼쪽: originalPosition.left }, 1000); }); }); var stop\_wiggle = false; // 모든 로테이터 버튼 클릭 시 모든 쿼드 회전 이미지 요소의 위치 재설정 $('.reset-all-rotaters-button').click(function () { $('.quad-rotating-image').each(function () { // 원래 위치 가져오기 var originalPosition = $(this).data('originalPosition'); // 드래그 가능한 이미지를 2초 간격으로 원래 위치로 다시 이동합니다. (this).animate({ top: originalPosition.top, 왼쪽: originalPosition.left }, 1000); }); }); // 처음에 버튼에 'inactive\_button' 클래스를 추가합니다. $('.reset-all-rotaters-button, .reset-all-hidden-characters-button').addClass('inactive\_button'); // 이미지를 드래그할 때 'inactive\_button' 클래스를 제거하도록 draggable() 메서드를 수정합니다. $('.draggable-image').draggable({ snap: '.draggable-image, .lightbox .rot-image-container', start: function () { // 요소를 클릭하거나 터치하면 흔들기 애니메이션을 중지합니다. if ($(this).hasClass('wiggly-image')) { stop\_wiggle = true; } }, drag: function (event, UI) { // 현재 변형 행렬을 가져옵니다. var transformMatrix = $(this).css('transform'); // 드래그에 사용되는 헬퍼 요소에 변환 행렬을 적용합니다. ui.helper.css('transform', transformMatrix); // 버튼에서 'inactive\_button' 클래스를 제거합니다. $('.reset-all-rotaters-button, .reset-all-hidden-characters-button').removeClass('inactive\_button'); }, stop: function () { // 드래그가 멈출 때 버튼에서 'inactive\_button' 클래스를 제거합니다. $('.reset-all-rotaters-button, .reset-all-hidden-characters-button').removeClass('inactive\_button'); }, }); // // 위치 재설정 후 버튼을 숨기는 함수를 추가합니다. // function hideResetButtons() { // $('.reset-all-rotaters-button, .reset-all-hidden-characters-button').hide(); // } // // 위치 재설정 후 hideResetButtons 함수를 호출합니다. // $('.reset-all-rotaters-button').click(function () { // $('. // $('.reset-all-rotaters-button').promise().addClass('inactive\_button'); // // $('.reset-all-rotaters-button').addClass('inactive\_button'); // }); // $('.reset-all-hidden-characters-button').click(function () { // $('. // $('.hidden-character-image').promise().done('inactive\_button'); // }); // reset-all-hidden-characters-button을 클릭하면 모든 숨겨진 문자 이미지 요소의 위치를 재설정합니다. $('.reset-all-hidden-characters-button').click(function () { $('.reset-all-hidden-characters-button').addClass('inactive\_button'); $('.hidden-character-image').each(function () { // 원래 위치 가져오기 var originalPosition = $(this).data('originalPosition'); // 드래그 가능한 이미지를 2초 트윈으로 원래 위치로 다시 이동합니다. (this).animate({ top: originalPosition.top, 왼쪽: originalPosition.left }, 1000); }); }); $('.reset-all-rotaters-button').click(function () { $('.reset-all-rotaters-button').addClass('inactive\_button'); }); // ... (나머지 코드) //M 드래그 가능한 이미지가 흔들리게 만들어 클릭/드래그해야 함을 표시합니다! function startWiggle(intervalTime) { setInterval(function () { if (stop\_wiggle) { return; } // 모든 흔들리는 이미지 가져오기 var images = $('.wiggly-image'); // 랜덤 인덱스 생성 var randomIndex = Math.floor(Math.random() \* images.length); // 임의의 흔들리는 이미지 가져오기 var randomImage = images.eq(randomIndex); if (Math.random() > .5) { // 랜덤 이미지에 흔들림 애니메이션을 적용합니다. randomImage.css('animation', 'wiggle .5s'); randomImage.one('animationend', function () { // 위글 애니메이션 제거 // 위글 애니메이션이 끝나면 제거합니다. randomImage.css('animation', ''); }); } }, intervalTime); } // 5000밀리초(5초)의 간격 시간으로 흔들기 애니메이션을 시작합니다. setTimeout(() => { startWiggle(500); }, 500); // 500ms를 먼저 기다리세요.