2

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

示例（html）：

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

CSS：

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

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

我想要实现的是这样的：

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

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

4

5 回答 5

3

是的，这是可能的：

#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");
于 2012-04-16T09:23:17.677 回答
0

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

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

于 2012-04-16T09:17:01.093 回答
0

您可以使用 jquery 添加或删除特定元素的 CSS 类

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

您也可以使用删除类

$('#nice_div').removeClass('animate');
于 2012-04-16T09:19:52.357 回答
0

嘿，这是不可能的，因为 jQueryanimate()函数具有某些属性，我们需要通过。它不直接连接到 CSS 类。

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

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

于 2012-04-16T09:20:59.970 回答
-1

您可以尝试使用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.
  });
});
于 2012-04-16T09:16:05.027 回答