Question

我在css3中尝试动画，我想在动画结束时使用jQuery来fadeOut（）。编写代码后，转换不起作用。

这是我的css3：

.slideRight{
    animation-name: slideRight;
    -webkit-animation-name: slideRight; 

    animation-duration: 3s; 
    -webkit-animation-duration: 3s;

    animation-timing-function: ease;    
    -webkit-animation-timing-function: ease;        

    visibility: visible !important; 
}

@keyframes slideRight {
    0% {
        transform: translateX(-150%);
    }
    100%{
        transform: translateX(150%);
        }
}

@-webkit-keyframes slideRight {
    0% {
        -webkit-transform: translateX(-150%);
    }
    100% {
        -webkit-transform: translateX(150%);
    }
}

这是jQuery：

$(document).ready(function(){
    $('#yacht').fadeTo(function(){
    $('#yacht').css('display', 'none');
});

这是HTML：

<!--Yacht-->
    <div class="col-xs-12 col-md-2">
        <img src="images/yacht.png" class="img-responsive slideRight" id="yacht" alt="Picture of a Yacht" />
    </div>

有谁知道我做错了什么？

Answer 1

语法错误

$(document).ready(function(){
    $('#yacht').fadeTo(function(){
    $('#yacht').css('display', 'none');
});

应该是

$(document).ready(function(){
    $('#yacht').fadeTo(function(){
       $('#yacht').css('display', 'none');
    }); <--- here
});

总的来说，我认为你想做这样的事情

var events = 'anomationend webkitAnimationEnd oanimationend MSAnimationEnd';
$(document).ready(function(){
    $('#yacht').on(events, function(){
       $('#yacht').fadeOut();
    }); <--- here
});

当动画结束时会发生这种情况，随着代码的进展，您可能需要在执行fadeOut();之前识别动画

Answer 2

为什么不在动画结束时使用现有动画淡出图像？您可以设置不透明度，以便像90-95%一样设置动画，并将动态opacity的{{1}}设置为0：

100%

http://jsfiddle.net/JckdJ/3/

JQUERY的CSS3动画淡出或消失

2 个答案: