javascript - jQuery 裁剪一个没有裁剪插件的图像

Question

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

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

1. 我想知道是否有更简单的方法，而不是为每个图像创建一个 div 并每次都使用脚本。
2. 一种动画方式，从右到左，而不是从左到右。

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

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

Fiddle

多谢指教

Answer 1

我将其更改为使用 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');
        }
    });
});

updated fiddle

我没有找到“从右到左”的动画 :(