Question

有没有办法使用类的样式来动画某个div？

示例（html）：

<div id="nice_div"></div>

的CSS：

#nice_div{
    width: 200px;
    height: 150px;
}

.animate{
    width: 300px;
    height: 250px;
}

我想要达到的目标是：

$("#nice_div").animate(".animate");

显然这段代码是虚构的。有没有办法实现类似的东西？哦是的，DOM中没有.animate div。任何帮助表示赞赏。

Answer 1

是的，这是可能的：

#nice_div {
    -webkit-transition: height 1s, width 1s;
    -moz-transition: height 1s, width 1s;
    transition: height 1s, width 1s;


    width: 200px;
    height: 150px;
}

$("#nice_div").addClass(".animate");

Answer 2

这是不可能的。 animate()方法只接受要更改的属性映射。

有可能从已经应用了类的隐藏元素创建一个映射，但这实现起来非常棘手，因为您无法以编程方式知道样式表中设置了哪些样式，这些是由浏览器自动设置的。

Answer 3

您可以使用jquery

为特定元素添加或删除CSS类

$('#nice_div').click(function(){
this.addClass('animate');
                              });

您可以使用

删除课程

$('#nice_div').removeClass('animate');

Answer 4

嘿，这是不可能的，因为jQuery animate()函数具有某些属性，我们需要传递。它不直接连接到css类。

此外，如果您需要为同一元素添加新类，则可以根据您的要求使用addClass()函数或css()函数。

你可以尝试实现这样的目标，在页面上有一个隐藏文件。访问隐藏字段中的值并连接animate()函数中的值。

Answer 5

您可以尝试使用jquery

为任何元素设置动画，例如简单图像：

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123"
  style="position: relative; left: 10px;" />

同时为图像的不透明度，左偏移和高度设置动画：

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

使用css id为div设置动画

5 个答案: