javascript - jQuery、divの幅を左から右に縮小

Question

ご覧のとおり、左側にスライドがあり、同時に with が 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 */
}

更新されたデモ

Answer 2

これはあなたを助けるかもしれません

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

デモをチェック