Can't get this damn jQuery working

[jon22]

been playing with this for hours now and still can't get it working.

check out the working demo here: [jsfiddle.net...]

//Set div dimensions equal to image's dimensions:
$('#image_holder_1').width($('#image_1').width(300));
$('#image_holder_1').height($('#image_1').height());

//tell the browser what to do when hovering on the div:
$('#image_holder_1').hover(function() {
  //when mouse hover:
  $('#image_1').animate({
    top: '-' + $(this).height() + 'px'
  }, /*duration*/2000, /*ease*/'swing');
}, function() {
  //when mouse out, no hover:
  $('#image_1').animate({
    top: '0px'
  }, /*duration*/500, /*ease*/'swing');
});

.image_holder {
  overflow: hidden; /* not necessary */
}
.image {
  position: relative;
}

<div id="image_holder_1" class="image_holder">
  <img id="image_1" class="image" src="http://bettafootwear.com/CrownYourFeet/wp-content/gallery/released-july-2008/avenger-swamp-white.jpg" />
</div>

[penders]

What is the desired result?

[jon22]

take a look here (on mouseover) [jsfiddle.net...]

[penders]

Yeah, I'd had a look at the demo and assumed it was your code... which I assumed wasn't working as you wanted, but couldn't really see what was wanted, hence my query.

But you're saying the jsfiddle demo is actually the desired result, but you can't reproduce it? Is that right?!

[jon22]

yeah sorry, that is the result i want, do you have any idea why it wont work?

[penders]

If you right-mouse where the result is and "View Frame Source" (exact option varies according to browser) then you can see the exact page used to produce the result - it's just an iframe.

Are you including the jQuery library? The example uses an HTML5 doctype - although it's just important that you have a valid doctype. You can also see that two additional stylesheets are included: normalize.css and result-light.css. You might need the first of these?