Question

假设我有css喜欢

position: fixed;
width: 200px;
height: 100px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -50px;

这个css我需要从div的jquery animate函数设置。可能吗。我知道使用jquery动画功能，如

$(".ui-dialog").animate({
left: viewportwidth / 2 - $(".ui-dialog").outerWidth() / 2, 
top: viewportheight / 2 - $(".ui-dialog").outerHeight / 2
}, 1000);

感谢

Answer 1

将CSS创建为类：

div.myClass {

    position: fixed;
    width: 200px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -50px;

}

div.newClass {

    position: fixed;
    width: 500px;
    height: 500px;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -50px;

}

然后使用jQuery addClass()

将类动态添加到DIV元素

$("div#myDiv").addClass("myClass");

这假设您的DIV的ID为myDiv，如下所示：

<div id="myDiv"></div>

如果您需要将其当前班级设置为另一个班级，您可以使用switchClass()函数：

这是将绑定上的类更改为按钮的示例

<script>
$(function() {
    $( "#button" ).click(function(){
        $( "div#myDiv" ).switchClass( "myClass", "newClass", 1000 );
    return false;   
    });
});
</script>

Answer 2

是的，这是可能的，但要注意两件事：

您无法为position:fixed制作动画。（引自jQuery .animate() manual）：

大多数非数字属性无法使用basic进行动画处理 jQuery功能（例如，宽度，高度或左侧可以动画但背景颜色不能

使用类来处理此问题。
使用marginTop和marginLeft代替margin-top和 margin-left。（引自Ricardo Vega's answer on SO）：

尝试使用“marginTop”而不是“margin-top”。通常在你使用时 CSS道具作为“border-something”或“margin-something”更好使用它的“标准化”版本，就像你在DHTML中一样（styles.marginTop）。

希望它有所帮助。

Answer 3

您的代码与我合作：）

但是如果你使用“viewportwidth”＆amp; “viewportheight”与“px”或“em”或者什么，使用“.parseInt（）”来消除单位：）

我的代码是：

var viewportwidth = 120;
var viewportheight = 120;
$(".ui-dialog").animate({
left: viewportwidth / 2 - $(".ui-dialog").outerWidth() / 2 +"px", 
top: viewportheight / 2 - $(".ui-dialog").outerHeight() / 2 +"px"
}, 1000);

});

顺便说一句，我看到你在“outerHeight”之后错过了括号，而且我的代码与我一起工作。在FF中没有+"px"，我希望我能正确理解你。

如何使用jquery animate函数设置多个css

3 个答案: