Javascript 在jquerymobile中设置按钮css属性的动画
我试图使jquerymobile(v1.1.1)按钮动画化,就好像它在闪烁一样。 我已经走了这么远:Javascript 在jquerymobile中设置按钮css属性的动画,javascript,css,button,jquery-mobile,jquery-animate,Javascript,Css,Button,Jquery Mobile,Jquery Animate,我试图使jquerymobile(v1.1.1)按钮动画化,就好像它在闪烁一样。 我已经走了这么远: myButton = $('<div data-role="button" data-theme="reset" data-inline="true" >save</div>').appendTo(this.myNode); setInterval( function(){ myButton.animate ({
myButton = $('<div data-role="button" data-theme="reset" data-inline="true" >save</div>').appendTo(this.myNode);
setInterval(
function(){
myButton.animate ({
opacity: 0.5
}, 400, function(){
myButton.animate ({
opacity:1,
},400);
});},1000);
您可以使用CSS3转换(大多数移动浏览器都支持)来创建颜色动画 JS- CSS- 下面是一个演示: 上面的CSS从按钮中删除渐变背景图像,以便使用它们的平面颜色背景(可以通过CSS设置动画)。然后,
transition
声明只定义在什么属性上使用什么类型的动画以及动画应该持续多长时间。我已将动画设置为略短于间隔,因此元素不会持续设置动画
转换文档:
浏览器对转换的支持:您可以发布jQuery mobile为按钮生成的HTML吗?jquerymobile动态地向HTML添加了很多类声明。这将有助于查看它为您的按钮生成了什么。感谢您提供详细和启发性的答案!
<div data-role="button" data-theme="reset" data-corners="true" data-shadow="true"
data-iconshadow="true" data-wrapperels="span"
class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-reset">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">save</span>
</span>
</div>
$(function () {
//save current color so we can go between two colors
var currentColor = "red";
//set an interval
setInterval(function () {
var $this = $('a');
//swap colors (background and text)
if (currentColor === "red") {
currentColor = "blue";
$this.css({
backgroundColor : "blue",
color : "white"
});
} else {
currentColor = "red";
$this.css({
backgroundColor : "red",
color : "black"
});
}
}, 2500);
});
.ui-page .ui-btn {
background-image : none;
-webkit-transition : background-color 2s linear, color 2s linear;
-moz-transition : background-color 2s linear, color 2s linear;
-ms-transition : background-color 2s linear, color 2s linear;
-o-transition : background-color 2s linear, color 2s linear;
transition : background-color 2s linear, color 2s linear;
}