Javascript jQuery，从左向右收缩div宽度

如您所见，左侧有一个幻灯片，同时with从100%降至0

我想得到同样的效果，但是从左到右

我搞不好

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

小提琴示例：

这可能对您有所帮助

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

---

检查一下这很简单。将图像向右对齐，然后使用jQuery将其缩小25%，如下所示：

jQuery:

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

.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 */
}

CSS:

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

.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 */
}

---

嗨，Anil，这会将其全部向右滑动，但不会像我的示例中那样同时收缩。谢谢，我认为它不会收缩，在你的演示中，它会向右滑动，这很好。但我也希望它同时“收缩”（从左到右将宽度从100%减少到0）。请看我的例子。感谢哈利，它正在向右滑动，但不会同时“收缩”（从左到右将宽度从100%减少到0）。请看我的例子。Thanks@IGIT它正在从100%缩小到0。工作原理与您的示例相同，只是对我来说方向相反。@IGIT:请参阅更新的答案。我在CSS中添加了另一个设置，它似乎如预期的那样工作：）我还添加了一个演示（增加了持续时间以使效果更清晰）。@IGIT:Yup mate，现在看起来很简单：D。顺便说一句，请接受答案：）哈利，你是我今天的英雄！如此简单却不那么明显！你是摇滚明星！谢谢！：）