Question

我有一个元素#show，该元素在页面上显示为可见，单击按钮后消失（第二个元素#hidden出现在其位置），然后在下次单击该按钮时重新出现（#hidden消失）。 jQuery单击按钮后，我为#show的不透明度设置了动画。

但是，我也想在#show的不透明度上使用关键帧动画，以便它在加载时可以很好地淡入页面。看来，当我添加关键帧动画时，它会永久声明#show的不透明度。不透明度保持为1，并且#show的jQuery代码不再起作用。

我不确定是否有其他方法可以在jQuery中切换#show的可见性，或者在jQuery中使用关键帧替代方法。在这种情况下，tadeToggle不可用，因为我需要保留#show的高度。

这是#show上的关键帧：

@-webkit-keyframes fade { 0% { opacity:0; } 50% { opacity:0; } 100% { opacity:1; } }
@keyframes fade { 0% { opacity:0; } 50% { opacity:0; } 100% { opacity:1; } }

#show的CSS：

#show {
    position: relative;
    width: 100%;
    height: 100%;
    animation: fade 1.5s;
}

和元素的jQuery：

$('#button').click(function () {
    if ($('#shown').css('opacity') == 1) {
        $('#shown').animate({opacity:0}, 250);
        $('#hidden').fadeToggle(250);
    }
    else {
        $('#hidden').fadeToggle(250);
        $('#shown').animate({opacity:1}, 250);
    }
});

这是小提琴：http://jsfiddle.net/guwq51om/3/

tl; dr：元素可以在网页加载时具有初始的关键帧动画，并且它的不透明度仍可以由jQuery切换吗？

在元素上执行关键帧动画后，由jQuery切换不透明度

0 个答案: