показать изображение частично без холста без рамки или без плагина

Question

У меня есть это img, а коробка div вокруг него.

http://jsfiddle.net/6d4yC/7/

1) Я хочу, чтобы, когда изображение в большом размере, только часть изображения (250x150), не создавая белую накладку над ним. Я помещаю # box1 div вокруг изображения, и он не может ограничить отображаемое изображение.

2) Когда мышь покидает картинку, я хочу разорвать анимацию и просто оживить изображение до его большого размера.

Как я могу это достичь? Благодарю.

Answer 1

1. Добавить overflow: hidden в ваш div.
2. Добавить остановку(), чтобы остановить текущей анимации

JsFiddle: http://jsfiddle.net/6d4yC/9/

Answer 2

Просто добавьте overflow: hidden; в свой CSS для # box1. А что касается вашего javascript

$(document).ready(function(){ 
    $("#box1").mouseenter(function(){ 
    $("img").stop().animate({width:'250px',height:'150px'},500); 
    }); 
    $("#box1").mouseleave(function(){ 
    $("img").stop().animate({width:'600px',height:'200px'},500); 
    }); 
});