我很好奇如何根据div的动画设置动态设置高度或宽度。
JQUERY
$(document).ready(function() {
var div1dimensions = 50 / 180 +'px';
$("#div1").animate({
width: divdimensions,
height: "100px",
opacity: 1,
}, 1500 );
});
我可以不只是创建一个变量并将其放在宽度或高度的位置吗?或者仅适用于CSS值,例如100px?
谢谢。
答案 0 :(得分:1)
重要的是,当使用.css()
方法的对象形式时,放置在那里的任何数值都固有地假设为像素值:
$(document).ready(function() {
var div1dimensions = (50 / 180);
$("#div1").animate({
width: div1dimensions,
height: 100,
opacity: 1,
}, 1500 );
});
请注意缺少引号。如果你这样做,你可以很容易地使用变量:
$(document).ready(function() {
var div1dimensions = (50 / 180),
divHeight = div1dimensions * 1.5;
$("#div1").animate({
width: divdimensions,
height: divHeight,
opacity: 1,
}, 1500 );
});
或者您希望的任何其他变量计算,这只是一个例子。此外,作为jQuery 1.4,您可以传递一个函数进行该计算。修改jQuery .css() documentation中使用的示例以反映您的示例:
$(document).ready(function() {
var div1dimensions = (50 / 180);
$("#div1").animate({
width: div1dimensions,
height: function(i){
return i * 50;
},
opacity: 1,
}, 1500 );
});
那个很快就会变得棘手,并且在非常具体的情况下才真正有用,但在需要时很方便。