jQuery，从左到右收缩div宽度

正如你所看到的，有一张幻灯片在左边，同时从100％减少到0。jQuery，从左到右收缩div宽度

我想从左到右得到同样的效果。

我不明白！

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

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

来源

2013-09-25 IGIT

这是非常简单的。图像右对齐，然后通过使用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

来源

2013-09-25 15:52:29 Harry

嗨，哈利，它滑到正确的罚款，但不是'收缩'（从左到右减少宽度从100％到0）。请看我的例子。谢谢 – IGIT

@IGIT它从100％缩小为0.除了与我相反的方向，与您的示例相同。 – Harry

哈利，如果你看到我的例子，同时有两个效果，而你的只有一个效果。 – IGIT

可能这有助于

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

你检查demo

来源

2013-09-25 15:42:54

嗨阿尼尔，这会将它全部滑向右侧，但不会像我的示例那样同时收缩它。谢谢 – IGIT

我认为它不会收缩 –

Anil，在你的演示中，它向右滑动，这很好。但我也希望它在同一时间“缩小”（从左到右从100％减少到0）。请看我的例子。谢谢 – IGIT

jQuery，从左到右收缩div宽度

回答

相关问题