如果您需要它在旧版本的 IE 中工作,您可以使用.animate()将删除按钮滑入和滑出 div 并隐藏溢出。
工作示例
脚本
$(function () {
$("#editButton").click(function () {
if ($("#deleteButton").offset().left > $('.new').offset().left + $('.new').width()) { // if the button is outside of the div
$('p').animate({ // animate the width of the text to 70%
width: '70%'
}, 1500);
$("#deleteButton").animate({ // and animate the delete button into the div
right: '0%'
}, 1500);
} else { // if the button is inside the div
$('p').animate({ //animate the width of the text to 100%
width: '100%'
}, 1500);
$("#deleteButton").animate({ //move the delete button back out of the div
right: '-32%'
}, 1500);
}
});
});
CSS
#deleteButton {
position:absolute;
top:0;
right:-32%;
width:30%;
height: 120px;
}
.new {
width:100%;
position:relative;
overflow:hidden;
padding-bottom: 6%;
}
HTML
<button id="editButton">Toggle Edit Mode</button>
<div class="new">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pulvinar aliquet ante, eu malesuada eros ornare a. Sed eleifend sit amet quam eget vehicula. Fusce viverra bibendum auctor. Quisque sed diam adipiscing, fringilla tortor quis, ullamcorper magna. Integer vel dapibus turpis, sed ullamcorper mauris.</p>
<button id="deleteButton">Delete</button>
</div>
在 IE 7、8 和 9 中测试和工作