JQuery剪切圖像不剪裁插件

Question

我試圖用JQuery顯示一個圖像的一部分，例如，它的寬度爲0 - 200像素。

我已經解決了這個問題，所以...

1. 我想知道是否有一個更簡單的方法，而不是創建每個圖像的股利和每次使用腳本。
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的寬度。

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

updated fiddle

我沒有找到一個「從右至左」動畫:(

Answer 2

你快把它太複雜，只要控制容器的大小和它完成！

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

http://jsfiddle.net/DerekL/CLFTe/