Question

我正在尝试在屏幕外设置一个我制作动画的面板。也就是说，当我点击一个按钮时，它会动画到屏幕上，当我再次点击同一个按钮时，它会激活屏幕。但是，页面加载面板在屏幕上会发生什么。当我点击按钮时，它会在屏幕上显示动画效果，当我再次点击按钮时，它永远不会动画回到屏幕上。我不确定我做错了什么......这是我的代码：

 $(document).on('pageinit','#sellbookpage',
        function()
        {   
            flagclass = true;
            //button that gets clicked
            $('#SignUpLink').click(function() 
            {
                if(flagclass)
                {
                    $('#signinput').addClass("animated  fadeOutDownBig");
                    flagclass = false;
                }
                else
                {
                    $('#signinput').addClass("animated  fadeOutUpBig");
                    flagclass = true;
                }

            }););

基本上我正在寻找的功能是当我点击按钮时让面板在屏幕内外显示动画。

Answer 1

尝试这样的事情

$(document).ready(function(){
    $('#sellbookpage').click(function(e){
        e.preventDefault();
        var test = $('#signinput');
        if(test.hasClass('showed')) {
            test.removeClass('showed').fadeOut();
        }else{
            test.addClass('showed').fadeIn();
        }
    })
})

并添加到输入类，显示它是否在页面加载时可见：）

http://jsfiddle.net/futkB/

Answer 2

我遇到了同样的问题。我发现这篇博文文章将其分解，以及如何解决它。

使用jQuery的one（）函数来检测css3动画的结束。然后你将删除任何animated.css类，如animate等...

http://blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end

所以你的代码看起来像这样

$('#signinput').addClass("animated  fadeOutDownBig")
    .one('webkitAnimationEnd oanimationend msAnimationEnd animationend',   
        function(e) {
            $(this).removeClass('animated fadeOutDownBig');
        }
    );

使用Animate.css时切换动画

2 个答案: