jQuery Hover - UnHover not functioning.

Question

I've looked through the other related posts to my question already over the past hour or so and tried out various fixes for them, but it still doesn't work, so here it goes:

I have a website, located at www.rooms101.com my client wants me to add a page-peel effect, so I am using an example from http://www.sohtanaka.com/web-design/simple-page-peel-effect-with-jquery-css/ and I have copied the code and images directly from the site to test it out, but for some reason it doesn't work.

jQuery code:

<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 (contained inside the body tag and above the page wrapper):

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

I also tried a simple effect of changing a div's color on hover, which can be found in the green box at the bottom left of the page, also it is not working... 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' });
}
);
});

Thanks in advance for the help, this problem has utterly perplexed me.

EDIT: I went ahead and tried this on my personal website with the exact same code, and to basically no surprise it functions as it should...I must say I really do hate inheriting crappy code from lazy designers...

Unfortunately they don't understand just how bad their code is...so if anyone can offer a reason as to why this is not functioning and a "hack" fix for the time being that would be appreciated.

Answer 1

Both Firefox with Firebug and the Google Chrome Dev tools point out two JS errors... the first being on line 99 which seems to be your code

missing } after function body  

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

The other is on 486 which says that writeObjects is not defined.

Answer 2

Ahmm.. I don't mean to be rude. But did you even check the error console in the browser of your choice? There is a javascript error (actually 2) and if you check the source it is obvious why too.

The jQuery javascript code used for this effects on your page (rooms101.com) looks like this

<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. A oneliner. Which of course fails to run as everything after

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

Is commented out. Your whole code is a comment.

So either change the jQuery code in a way that it runs also when put on a line (remove all comments and maybe a few other adjustments) or get your "webpage" to output your javascript with line breaks included.