javascript - jQuery，从左到右缩小div宽度

Question

如您所见，向左滑动，同时从 100% 减少到 0。

我想获得相同的效果，但从左到右。

我做对了!

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

示例 fiddle :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