jQuery Hover-UnHover not working

Question

지난 한 시간 동안 이미 다른 질문에 대한 다른 관련 게시물을 살펴본 결과 다양한 픽스를 시도했지만 아직 작동하지 않으므로 여기에 있습니다.

www.rooms101.com에있는 웹 사이트에서 고객이 페이지 필 효과를 추가하기를 원하므로 http://www.sohtanaka.com/web-design/simple-page-peel-effect-with-jquery-css/의 예제를 사용하고 있으며 사이트에서 코드와 이미지를 직접 복사하여 테스트했습니다 하지만 어떤 이유로 작동하지 않습니다.

jQuery 코드 :

<script type="text/javascript"> 
    $('#pageflip').hover(function() { //On hover... 
     $("#pageflip img , .msg_block").stop() 
      .animate({ //Animate and expand the image and the msg_block (Width + height) 
       width: '307px', 
       height: '319px' 
      }, 500); 
    }, 
    function() { 
     $("#pageflip img").stop() //On hover out, go back to original size 50x52 
      .animate({ 
       width: '50px', 
       height: '52px' 
      }, 220); 
     $(".msg_block").stop() //On hover out, go back to original size 50x50 
      .animate({ 
       width: '50px', 
       height: '50px' 
      }, 200); //Note this one retracts a bit faster (to prevent glitching in IE) 
    }); 
</script> 

HTML (페이지 래퍼 body 태그 내부에 이상 포함) : 나는 또한 호버에 사업부의 색상을 변경하는 간단한 효과를 시도

<div id="pageflip"> 
    <a id="pageflip-a" href="#"> 
     <img src="http://Rooms101.com/page-peel/page_flip.png" alt="" /> 
     <span class="msg_block">Layaway Your Vacation Today</span> 
    </a> 
</div> 

, 어떤 페이지 왼쪽 하단의 녹색 상자에서 찾을 수 있으며 작동하지 않습니다. HTML :

<div class="box" style="width: 20px; height: 20px; background-color: green;"></div> 

jQuery를 : 도움에 미리

$(document).ready(function() { 
    $('.box').hover(function() { 
      $(this).css({ background: 'blue' }); 
     }, 
     function() { 
      $(this).css({ background: 'black' }); 
     }); 
}); 

덕분에,이 문제는 완전히 나를 당황했다.

EDIT : 나는 똑같은 코드로 내 개인 웹 사이트에서 이것을 시도했지만 기본적으로 게으름 피우다 ... 나는 게으른 디자이너로부터 진절머리 나는 코드를 물려 받는다는 것을 정말로 싫어한다고해야합니다.

불행히도 그들은 자신의 코드가 얼마나 나쁜지 이해하지 못합니다. 누군가가 이것이 작동하지 않는 이유와 시간에 대한 "해킹"수정에 대한 이유를 제시 할 수 있다면 이해할 수있을 것입니다.

Answer 1

방화범에 모두 파이어 폭스와 구글 크롬 개발 도구는 오류가 ... 것 같다 라인 (99)의 첫 번째 존재가 코드 writeObjects 말한다 다른 하나는 486에

missing } after function body 

    bit faster (to prevent glitching in IE)}); 

로 두 JS를 지적 정의되지 않았습니다.

Answer 2

아 .. 나는 무례하다는 뜻이 아닙니다. 그러나 원하는 브라우저에서 오류 콘솔을 확인 했습니까? javascript 오류 (실제로 2)가 있으며 원본을 확인하면 이유도 분명합니다.

는 자바 스크립트 페이지 (rooms101.com)에이 효과를 위해 사용되는 코드 JQuery와 아차,이

<script type="text/javascript">$('#pageflip').hover(function() { //On hover... $("#pageflip img , .msg_block").stop()  .animate({ //Animate and expand the image and the msg_block (Width + height)   width: '307px',   height: '319px'  }, 500); } , function() { $("#pageflip img").stop() //On hover out, go back to original size 50x52  .animate({   width: '50px',   height: '52px'  }, 220); $(".msg_block").stop() //On hover out, go back to original size 50x50  .animate({   width: '50px',   height: '50px'  }, 200); //Note this one retracts a bit faster (to prevent glitching in IE)});</script> 

것 같습니다. oneliner. 어느 것이 당연히 모든 것으로서 실행하지 못합니까?

$('#pageflip').hover(function() { //On hover... 

이 주석 처리되었습니다. 전체 코드는 주석입니다.

그래서 jQuery 코드를 줄에 넣을 때 (모든 주석을 제거하고 다른 조정을 할 때도) jQuery 코드를 변경하거나 줄 바꿈을 포함하여 자바 스크립트를 출력하도록 "웹 페이지"를 가져 오십시오.