[英]css3 jquery transitions
是否有比這更好的觸發css3轉換的方法,我認為這有點怪異,還是每個人都在這樣做?
假設我們得到了一個具有以下CSS的div:
.box{
position: fixed;
top: 50%;
left: 50%;
margin: -50px 0px 0px -50px;
width: 100px;
opacity: 0;
transition: opacity .3s ease-out;
}
.box.box-visible{
opacity: 1;
}
現在我們得到了以下jQuery:
$(function(){
$('.box').addClass('box-visible');
});
這不會觸發動畫,因此在執行此操作時:
$(function(){
var transition = setTimeout(function(){
$('.box').addClass('box-visible');
}, 1);
});
然后觸發轉換,但這難道不是很容易嗎? 還有其他解決方案嗎?
感謝您的閱讀,我希望我的答案是明確的。
請使用它作為背景動畫,它將支持ll瀏覽器示例:
div ul li a{background:url(../images/asso/arow.png) no-repeat left 0;}
div ul li a:hover{ background-position:0 -66px;}
(function($) {
$.extend($.fx.step,{
backgroundPosition: function(fx) {
if (fx.state === 0 && typeof fx.end == 'string') {
var start = $.curCSS(fx.elem,'backgroundPosition');
start = toArray(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.end);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
}
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
function toArray(strg){
strg = strg.replace(/left|top/g,'0px');
strg = strg.replace(/right|bottom/g,'100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
}
});
})(jQuery);
$(function(){
$('ul li')
.mouseover(function(){
$(this).find('a').stop().animate({backgroundPosition:"(0 -66)"}, {duration:500})
})
.mouseout(function(){
$(this).find('a').stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
});
您只需要稍微修改一下代碼即可……
.box{
position: fixed;
top: 50%;
left: 50%;
margin: -50px 0px 0px -50px;
width: 100px;
border-width:thin;
border-style:solid;
background:red;
opacity: 0;
-moz-transition: opacity 3s ease-out;//for firefox
-o-transition: opacity 3s ease-out;// for opera
-webkit-transition: opacity 3s ease-out;// for chrome
}
.box-visible{
opacity:1;
}
然后在jQuery中
$(document).ready(function(){
$(function(){
$('.box').addClass('box-visible');
});
});
請記住:設置div的高度或在其中放置一些文本以注意更改。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.