Javascript CSS3动画与'；是由jQuery触发的吗？

我设置了一个div，这样只要点击一个按钮，div就会向上扩展以查看更多内容。在第二次单击时，按钮将向下滑动。我用JS来做这个，效果很好

其次，我在同一个div中添加了一个动画，以便在动画中的某些点上，div上下滑动。当我添加这个动画时，效果很好，但是切换和点击按钮上下滑动div不再有效，我不明白为什么

下面是对div应用了转换和动画的代码。有两个小提琴，一个显示jQuery向上/向下滑动，另一个演示下面的代码

任何帮助都将不胜感激

HTML

JS

jsFiddle-One-

---

我不知道你想要什么，但如果我明白了，这就是你需要的。我不喜欢这样，但你知道你想要什么。我来寻求帮助。问候

var clicked=false;
$(".crossRotate").on('click', function(){
    if(clicked){
        clicked=false;
        $(".content-wrapper").animate({"height": "162px"});
    }else{
        clicked=true;
        $(".content-wrapper").animate({"height": "280px"});
    }
});

.wrapper {
    width: 100%;
    height: 100px;
    position: absolute;
    overflow: hidden;
    margin: 0;
    padding:0;
    z-index: 1;
}

@-webkit-keyframes titledrop {
    0%, 25%, 50%, 75%, 100%{ bottom: -215px;}
    5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%{ bottom: -90px;}
}

@-moz-keyframes titledrop {
    0%, 25%, 50%, 75%, 100%{ bottom: -215px;}
    5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%{ bottom: -90px;}
}

@keyframes titledrop {
    0%, 25%, 50%, 75%, 100%{ bottom: -215px;}
    5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%{ bottom: -90px;}
}

.content-wrapper {
    position: absolute;
    z-index: 999;
    background: red;
    bottom: -90px;
    width: 100%;
    -webkit-animation: titledrop 60s cubic-bezier(0.19, 1, 0.22, 1) infinite;
    -moz-animation: titledrop 60s cubic-bezier(0.19, 1, 0.22, 1) infinite;
    -o-animation: titledrop 60s cubic-bezier(0.19, 1, 0.22, 1) infinite;
    -ms-animation: titledrop 60s cubic-bezier(0.19, 1, 0.22, 1) infinite;
    animation: titledrop 60s cubic-bezier(0.19, 1, 0.22, 1) infinite;
    -webkit-transition: bottom 1s ease-in;
    -moz-transition: bottom 1s ease-in; 
    -o-transition: bottom 1s ease-in;
    -ms-transition: bottom 1s ease-in;
    transition: bottom 1s ease-in;  
}

.crossRotate {
    position: absolute;
    background-color: blue;
    z-index: 1;
    cursor: pointer;
}

var clicked=true;
$(".crossRotate").on('click', function() {
    if(clicked) {
        clicked=false;
        $(".content-wrapper").css({"bottom": "-90px"});
    } else {
        clicked=true;
        $(".content-wrapper").css({"bottom": "0"});
    }
});

var clicked=false;
$(".crossRotate").on('click', function(){
    if(clicked){
        clicked=false;
        $(".content-wrapper").animate({"height": "162px"});
    }else{
        clicked=true;
        $(".content-wrapper").animate({"height": "280px"});
    }
});