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 アニメーションの終了を検出します。次に、アニメーションなどのanimate.cssクラスを削除します...

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 に答える