jq+css动态控制动画实现控件的淡入淡出效果

实现的效果：

今天想实现一个类似滑动门效果，顺便想学习一下CSS动画，经过一天的学习，发现了一些问题。

1.CSS隐藏控件，隐藏后控件占位不占位的问题。

2.用的jquery的有生方法无法实现显示：没有到显示：块的动画效果（虽然用动画的回调方法可以实现，但是总是有小错误，效果不尽如人意）。

众所周知，css隐藏控件有两种方法，display：none属性和visibility：hidden方法。前者不站位，后者站位。

解决第二个方法时，花了不少时间。

  选项1
    选项2
    

        
测试
        
测试
        
测试
        
测试
        
测试
        
测试
    
    

        
测试1
        
测试1
        
测试1
        
测试1
        
测试1
        
测试1
    

一开始，我使用的jquery的动画方法，在有生命的回调中再调用另个控件的消失方法，但是发现刚打开页面时，页面始终会闪烁一下，TEST1控件的淡入方法没有执行，是因为显示：没有的时候，无法实现动画效果，所以舍弃了这个方法。

 $(document).ready(function () {
        $('#a1').hover(function () {
            $('#test1').css('animation', 'hide 1s');
            setTimeout(() => {
                $('#test1').css('display', 'none');
                $("#test2").css('display', 'block');
                $('#test2').css('animation', 'obv 1s');
            }, 900);

        }),


        $('#a2').hover(function () {
            $('#test2').animate({opacity:0},1000,function () {
                $('#test2').css('display', 'none');
                
                $('#test1').animate({opacity:1},1000,function () {  
                    $('#test1').css('display', 'block');
                })
             });

           
           
        })
    });

真正的代码在这里：

    
    
    
    
    
    
    



    选项1
    选项2
    

        
测试
        
测试
        
测试
        
测试
        
测试
        
测试
    
    

        
测试1
        
测试1
        
测试1
        
测试1
        
测试1
        
测试1
    

最后，我是用JQ + CSS的方法，动态地控制的CSS，并且用的setTimeout的方法（延时），来达到这个效果。

 

欢迎来到我的个人博客来互相讨论技术：http://www.strivingtree.com/