我的容器div包含两个div div box1和div box2。 box2是绝对div,最大宽度为400px;
HTML:
<div id="container">
<div class="box1"></div>
<div class="box2 animated"></div>
</div>
的CSS:
#container{position:relative;width:100%;height:100%;background:red;}
#container #box1{position:relative;width:760px;height:300px;background:blue;margin:0;}
#container #box2{position:absolute;width:60px;max-width:350px;height:300px;background:yellow;;top:0;}
jQuery的:
$(document).ready(function(){
var box1width = $(".box1").width();
var windowWidth = $(window).width();
var x = windowWidth - (box1width + 350 ) ;
var wdt = windowWidth - (box1width) ;
if (".box2").hasClass("animated"){
if(x > windowWidth ){
$(".box2").animate({width:'350px'}, 2000);
} else {
$(".box2").animate({width: wdt+ 'px'}, 2000);
}
} else {
alert("no animation for box2 nd width remain 60px");
}
});
最初这会动画我的box2width;现在我想在窗口调整大小上设置box2宽度的动画,并限制我的box2动画宽度仅限350px;
答案 0 :(得分:1)
选中此Fiddle
if (!$(".box2").hasClass("animated")) {
if (wdt >= 60) {
$(".box2").animate({
width: '350px'
}, 2000);
$(".box2").addClass('animated');
}
} else {
if (wdt <= 350) {
$(".box2").css('width','60px');
$(".box2").removeClass('animated');
}
}
旁注:不确定这是否正是您想要的,如果不在下面评论:)
根据评论进行更新 updated fiddle
$(document).ready(function () {
anime();
var resizeTimer;
window.onresize = function () {
if (resizeTimer) {
clearTimeout(resizeTimer);
}
resizeTimer = setTimeout(function () {
anime();
}, 200);
}
})
function anime() {
var windowWidth = $(window).width();
var box1width = $(".box1").width();
var wdt = windowWidth - (box1width);
if (wdt > 60) {
$(".box2").stop(true,true).animate({
width: wdt
}, 1000);
$(".box2").addClass('animated');
} else if($(".box2").hasClass('animated')){
$(".box2").css('width', '60px');
$(".box2").removeClass('animated');
}
}
注意:这只是对您尝试做的事情的修复,我更喜欢css3过渡...