Javascript JQuery剪切图像，不带裁剪插件

我试图用JQuery显示图像的一部分，例如，从图像宽度的0-200像素

我已经解决了这个问题，所以

我想知道是否有更简单的方法，而不是为每个图像创建一个div，每次都使用脚本

一种从右到左而不是从左到右设置动画的方法

这是我的剧本，有什么建议吗

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

---

感谢您的建议

我将其更改为使用

background:url（）

属性，而不是单独的div，但效果看起来有点不同

但至少现在你要做的就是设置div宽度的动画

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

---

我没有找到“从右到左”的动画：（

你把它弄得太复杂了。只要控制容器的大小就可以了

function crop(ele, x1, y1, x2, y2){
   ele.animate({
        width: x2 - x1, height: y2 - y1
   }).find(">img").animate({
        top: -x1, left: -y1
   });
}

---

从右向左的动画没问题，它比我的效果更好，所以…谢谢：）