javascript - JQuery cut an image w/o cropping plugin -

i trying show part of image jquery, example, 0 - 200 px of it's width.

i have solved problem, so...

1. i want know if there's easier way, instead of creating div each image , using script each time.
2. a way of animating it, right left, instead of left right.

this script, suggestion?

$("button").click(function(){     if($('#hello2').css("opacity") != "0"){         $('#hello2').animate({             "width" : "0px",             "opacity" : "0"         });     }     else{         $('#hello2').animate({             "opacity" : "1",             "width" : "500px"         });     } }); 

fiddle

thanks in advice

i changed use background:url() property instead of separate div, effect looks little different though.

but @ least have animate width of div.

$(document).ready(function () {     $("button").click(function () {         if ($('#img').css("width") == "100px") {             $('#img').animate({                 "width": "300px"             }, 'slow');         } else {             $('#img').animate({                     "width": "100px"             }, 'slow');         }     }); }); 

updated fiddle

i didn't find 'right left' animation :(