jQuery，從左到右收縮div寬度

Question

正如你所看到的，有一張幻燈片在左邊，同時從100％減少到0。

我想從左到右得到同樣的效果。

我不明白！

jQuery('#target').animate({ width: '0', left: '-25%' }, 1500, 'swing'); 

例小提琴：http://jsfiddle.net/RsBNk/

Answer 1

這是非常簡單的。圖像右對齊，然後通過使用jQuery像低於25％降低它：

的jQuery：

jQuery('#target').animate({ width: '0', right: '-25%' }, 1500, 'swing'); 

CSS：

.box { 
    width: 100%; 
    position: absolute; 
    top: 0; 
    right: 0; /* Modified this line */ 
    height: 200px; 
    background-image: url('http://images.icnetwork.co.uk/upl/uxbridgegazette/jul2012/0/4/marc-mccarroll-image-2-304314157.jpg'); 
    background-position: right; /* EDIT: This property needs to be set */ 
} 

Updated Demo

Answer 2

可能這有助於

$('#target').animate({ 
    width : '0', 
    marginLeft: parseInt($('#target').css('marginLeft'),10) == 0 ? 
     $('#target').outerWidth() : 0 
}, 1500, 'swing'); 

你檢查demo