首頁 web前端 html教學 css3动画和jquery动画使用中要注意的问题_html/css_WEB-ITnose

css3动画和jquery动画使用中要注意的问题_html/css_WEB-ITnose

Jun 24, 2016 pm 12:34 PM

前一阵子写demo的时候遇到这样一个问题,就是给元素添加css3或者jquery动画时,在动画结束前不能准确取到元素的css属性。

1. css3动画讨论

先看代码:

html: 

<div id="hehe"></div><button class="change">change</button><button class="get">get</button>
登入後複製

css:

#hehe {    width: 100px;    height: 100px;    padding: 10px;    background: red;    -webkit-transition: all 10s ease-out;    -moz-transition: all 10s ease-out;    -o-transition: all 10s ease-out;    transition: all 10s ease-out;}
登入後複製

js:

$(document).ready(function() {    $('.change').click(function() {        $('#hehe').width(400);    });    $('.get').click(function() {        console.log($('#hehe').width());    });});
登入後複製

代码很简单。我们给hehe这个div添加了红色的背景色,并且使用了css3里的动画平滑效果css3 trasition(css3 trasition的使用方法可以参考这篇文章:http://www.w3cplus.com/content/css3-transition,写的很详细)。也就是说当hehe发生诸如宽高,背景或者是字体等css属性变化时候,会有ease-out(减速)平滑过渡效果,效果持续10秒。比如说我们点击change按钮,hehe的宽度会消耗10s的时间,慢慢增加到400px,产生动画效果。

问题来了:在动画进行过程中,我单击get按钮,控制台输出的hehe宽度是多少?

一开始我以为是400,因为点击change的时候,审查元素看到"

"。答案是否定的,我们得到的是动画进行过程中点击时刻hehe的宽度。

我们修改下console的代码:

console.log($('#hehe').css('width');
登入後複製

这下我们看到在整个动画过程中,我们点击get,得到的都是400px。这说明jquery里面的width()是实时获取元素宽度的,而css('width')只是单纯的获取元素的css值,因为也是带单位的。

2.jquery动画讨论

jquery动画就比较好理解了。我们去掉css3 transition的css代码,用jquery的animate来代替。

$(document).ready(function() {    console.log($('#hehe').width());    $('.change').click(function() {        $('#hehe').animate({width: "400px"}, 10000);    });    $('.get').click(function() {        console.log($('#hehe').width());    });});
登入後複製

由于jquery的动画实际上是动态的给元素添加style样式,所以无论我们是用width()还是css('width')来获取hehe的宽度都是动态变化的。不过也有一点不同,使用width得到的宽度是没有单位px的,而且都是整数;但是使用css('width')获得的宽度是带单位的,并且小数点后面位数很长。

总结:

讨论了这么多,其实关键就是要告诉大家,在使用动画的时候,如果立刻去获取还在变化中的css属性,尤其是宽高,很容易出现问题,必须等到动画结束后在去取这些元素的属性。或者你可以指定需要动画效果的css属性。打个比方,你要获得动画中的宽高,而实际上你想要的动画效果只是背景颜色的变化,那么你在写css3 transition的时候就可以这么写

-webkit-transition: background .7s ease-out;-moz-transition: background .7s ease-out;-o-transition: background .7s ease-out;transition: background .7s ease-out;
登入後複製

这样动画效果只会表现在背景色,而宽高是不会动态变化了。

同样的,对css3动画中的另外两个效果transform(http://www.w3cplus.com/content/css3-transform)和animation(http://www.w3cplus.com/content/css3-animation)也做了测试,发现跟transition是一样的,动画过程中元素属性都是动态变化的,甚至在运用animation的时候,用css('width')这样得到的宽度也是变化的了。感兴趣的同学可以去试试。

因此我们在运用css3动画的时候还需要多多注意动画带来的影响。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗? 公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗? Mar 04, 2025 pm 12:32 PM

公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?

如何使用HTML5表單驗證屬性來驗證用戶輸入? 如何使用HTML5表單驗證屬性來驗證用戶輸入? Mar 17, 2025 pm 12:27 PM

如何使用HTML5表單驗證屬性來驗證用戶輸入?

如何高效地在網頁中為PNG圖片添加描邊效果? 如何高效地在網頁中為PNG圖片添加描邊效果? Mar 04, 2025 pm 02:39 PM

如何高效地在網頁中為PNG圖片添加描邊效果?

HTML5中跨瀏覽器兼容性的最佳實踐是什麼? HTML5中跨瀏覽器兼容性的最佳實踐是什麼? Mar 17, 2025 pm 12:20 PM

HTML5中跨瀏覽器兼容性的最佳實踐是什麼?

&lt; datalist&gt;的目的是什麼。 元素? &lt; datalist&gt;的目的是什麼。 元素? Mar 21, 2025 pm 12:33 PM

&lt; datalist&gt;的目的是什麼。 元素?

我如何使用html5&lt; time&gt; 元素以語義表示日期和時間? 我如何使用html5&lt; time&gt; 元素以語義表示日期和時間? Mar 12, 2025 pm 04:05 PM

我如何使用html5&lt; time&gt; 元素以語義表示日期和時間?

&gt; gt;的目的是什麼 元素? &gt; gt;的目的是什麼 元素? Mar 21, 2025 pm 12:34 PM

&gt; gt;的目的是什麼 元素?

&lt; meter&gt;的目的是什麼。 元素? &lt; meter&gt;的目的是什麼。 元素? Mar 21, 2025 pm 12:35 PM

&lt; meter&gt;的目的是什麼。 元素?

See all articles