JS:改变它的显示后动画div

时间:2016-05-13 14:09:13

标签: javascript jquery html css

我有2个div,onCLick函数将设置1st display: none; 2nd display: block;并且我想在它替换1st之后设置第2个div的旋转动画。可悲的是,动画不起作用,它只能起到这种作用。

HTML:

 <div class="more-click">           
    <img src="img/arrow-more.png">  
 </div>
 <div class="more-click-back">
    <img src="img/arrow-more.png">
 </div>

CSS:

.more-click{
 display: block;
 transform: rotate(270deg);
}
.more-click-back{
 display: none;
 transition-duration: .5s;
 transform: rotate(270deg);
}

JS:

 $(".more-click img").click(function () {
        $(".more-click").css('display', 'none');
        $(".more-click-back").css('display', 'block');
        $(".more-click-back").css('transform', 'rotate(90deg)');
 });

有谁知道,为什么我的0.5s动画不起作用?谢谢!

1 个答案:

答案 0 :(得分:1)

你应该改变这个:

1second

并使其淡入,以便动画可以正常工作:

 $(".more-click-back").css('display', 'block');

我对您的代码进行了此修改,您可以在此处查看https://jsfiddle.net/IA7medd/swuogr4y/