2

これを書いていますが、アニメーションが衝突しています。これを正しく機能するように変更するにはどうすればよいですか?

 function () { 
$("#presentState").show("slide", { duration: 1500, easing: 'easeOutBack', direction: directionActive }); 
$("#presentState").fadeIn( 1500,  'easeOutBack'); 
}

私もこれを試しましたが、まったく機能しません。

 $("#presentState").show("slide", { duration: 1500, easing: 'easeOutBack', direction: directionActive }).fadeIn(1500, 'easeOutBack').dequeue();
4

3 に答える 3

4

プロパティマップを送信してアニメーション化することにより、複数のCSSプロパティをアニメーション化できます

隠れる:

$("#presentState").animate({ marginLeft: "-1000px", opacity: 0 }, 1500);

公演:

$("#presentState").animate({ marginLeft: "0", opacity: 1 }, 1500);
于 2012-06-16T23:51:59.613 に答える
3

これは私がやったことです:

function () {
$("#presentState").show("slide", { duration: 1500, easing: 'easeOutBack', direction: directionActive }).hide(); 
$("#presentState").fadeIn(1500).dequeue(); 
}

.hide();最初の関数呼び出しの最後に使用する必要がありました。

于 2012-06-17T00:31:46.193 に答える
0

これはstackoverflowでの私の最初の返信であり、あなたからの同意を期待しています、ありがとう〜

jquery UIエフェクトに基づいてさらに2つのエフェクトを追加しました。それらは、slideFadeinとslideFadeoutです。名前からエフェクトがどのようなものかをイメージできます。スライドとフェードイン/フェードアウトを同時に行います。使用法は他の効果とまったく同じです。

//this will slide up and fade out the element
$("#effect").effect("slideFadein",{},500);

//this will remove the element after effect end
$("#effect").effect("slideFadein",{mode:'remove'},duration);

jquery UI効果:jqueryui.com/effect

jsFiddle:jsfiddle.net/rw42S

以下のコードをjavascriptファイルに保存し、jquery.ui.jsの後に含めるか、jquery.ui.jsに貼り付けることで、これら2つの効果を使用できます。

これが私のコードです:

(function( $, undefined ) {
    $.effects.effect.slideFadeout = function(o,done){
        // create element
        var el = $( this ),
            props = [ "width" , "height" , "opacity"],
            speed = o.duration || 500,
            // 'hide' or 'remove'
            mode = o.mode || 'hide',
            animation,wrapper;

        // save properties
        $.effects.save( el, props );

        animation = {
            height: "0px",
            opacity: "0"
        };

        // create wrapper
        wrapper = $.effects.createWrapper( el ).css({
            overflow: "hidden"
        });

        // animate
        wrapper.animate(animation,speed,'swing',function(){
            if(el[mode]) el[mode]();
            // restore properties
            if(mode == 'hide') $.effects.restore( el, props );
            // remove wrapper
            $.effects.removeWrapper( el );
            // callback
            done();
        });
    };

    $.effects.effect.slideFadein = function(o,done){
        // create element
        var el = $( this ),
            speed = o.duration || 5000,
            props = [ "height" , "opacity"],
            animation,wrapper;

        animation = {
            height: el.outerHeight(true) + "px",
            opacity: "1"
        };

        // save properties
        $.effects.save( el, props );

        // show element to get correct width(if the element has no width)
        el.css({ height: "0px" }).show();

        // create wrapper
        wrapper = $.effects.createWrapper( el ).css({
            overflow: "hidden",
            opacity: "0",
            height: "0px"
        });

        // restore properties
        $.effects.restore( el, props );

        // animate
        wrapper.animate(animation,speed,'swing',function(){
            // remove wrapper
            $.effects.removeWrapper( el );
            // callback
            done();
        });
    };
})(jQuery);
于 2014-06-12T02:59:26.850 に答える