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

jQuery，从左到右缩小div宽度

2 个答案: