0

我目前正在尝试制作一个面板，以便在屏幕外进行动画处理。即，当我单击一个按钮时，它会在屏幕上显示动画，当我再次单击同一个按钮时，它会在屏幕上显示动画。但是会发生什么是页面加载面板在屏幕上。当我单击该按钮时，它会在屏幕上正常显示动画，而当我再次单击该按钮时，它永远不会在屏幕上显示动画。我不确定我做错了什么......这是我的代码：

 $(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;
                }

            }););

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

4

2 回答 2

0

尝试这样的事情

$(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/

于 2013-11-12T12:22:14.687 回答
0

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

您使用 jQuery 的 one() 函数来检测 css3 动画的结束。然后您将删除任何动画.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');
        }
    );
于 2014-03-26T22:49:35.600 回答