jQuery Hover - UnHover ne fonctionne pas

Question

J'ai regardé les autres messages liés à ma question au cours de la dernière heure et j'ai essayé différentes corrections pour eux, mais ça ne marche toujours pas, alors voilà:

J'ai un site Web, situé à www.rooms101.com mon client veut que j'ajoute un effet de pelage de page, ainsi j'emploie un exemple de http://www.sohtanaka.com/web-design/simple-page-peel-effect-with-jquery-css/ et j'ai copié le code et les images directement du site pour le tester out, mais pour une raison quelconque, cela ne fonctionne pas.

Code 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 (contenu dans la balise body et au-dessus de l'enveloppe de page):

<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> 

J'ai aussi essayé un simple effet de changer la couleur d'un div sur le vol stationnaire, qui peut être trouvé dans la boîte verte en bas à gauche de la page, aussi cela ne fonctionne pas ... 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' }); 
     }); 
}); 

Merci à l'avance pour l'aide, ce problème m'a complètement perplexe.

EDIT: J'ai essayé et essayé ceci sur mon site personnel avec exactement le même code, et fondamentalement aucune surprise il fonctionne comme il devrait ... Je dois dire que je déteste vraiment hériter le code corrompu des concepteurs paresseux. Malheureusement, ils ne comprennent pas à quel point leur code est mauvais ... donc si quelqu'un peut fournir une raison pour laquelle cela ne fonctionne pas et une solution "hack" pour le moment qui serait appréciée.

Answer 1

deux Firefox avec Firebug et les erreurs d'outils Google Chrome Dev indiquent deux JS ... la première étant en ligne 99 qui semble être votre code

missing } after function body 

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

L'autre est sur 486 qui dit que writeObjects n'est pas défini.

Answer 2

Ahmm .. Je ne veux pas être impoli. Mais avez-vous même vérifié la console d'erreur dans le navigateur de votre choix? Il ya une erreur javascript (en fait 2) et si vous vérifiez la source, il est évident pourquoi aussi.

Le code javascript jQuery utilisé pour ces effets sur votre page (rooms101.com) ressemble à ceci

<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> 

Oops. Un oneliner. Qui, bien sûr, ne peut pas s'exécuter comme tout après

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

Est mis en commentaire. Votre code entier est un commentaire. Changez donc le code jQuery de façon qu'il s'exécute également lorsqu'il est mis en ligne (supprimez tous les commentaires et peut-être quelques autres ajustements) ou obtenez votre "page web" pour afficher votre javascript avec les sauts de ligne inclus.