首页 > 请教JQ动画延迟问题。

请教JQ动画延迟问题。

我想的是让div旋转后消失,但是测试的时候div是直接消失的,请教大家怎么解决?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery.rotate.js"></script>
<script>
$(function(){

$("#di").click(function(){
    $(this).animate({
        rotate:"85deg"  
    },100);
    $(this).delay(200)
       .hide();
});    

});

</script>
<style>

di{ width:600px;

 height:600px;
 background:#000;
 position:absolute;
 transform:}    

</style>
</head>
<body>

<div id="di">
</div>
</body>
</html>


#di.active{
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transition:all 2s;
    -webkit-transition:all 2s;
} 

$("#di").click(function(){

$(this).addClass("active").hide(2000);   

});


你在调用animate时,设置 回调函数就好了,不要用Delay,而且100毫秒不够,太少了

 $(this).animate({
    rotate:"85deg"  
},function(){
    //hide
});

另外,此处应该用CSS3动画,比Jquery animate性能好


$(function() {

$("#di").click(function() {
    $(this).animate({
        rotate: "85deg"
    }, 100).hide(800);
});

});

【热门文章】
【热门文章】