Question

我写了这个，但动画正在发生碰撞。如何更改此功能才能正常工作？

 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();

Answer 1

您可以通过将属性映射发送到 animate 来为多个CSS属性设置动画：

隐藏：

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

显示：

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

Answer 2

这就是我最终做的事情：

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

我必须在第一次函数调用结束时使用.hide();。

Answer 3

这是我在stackoverflow中的第一个回复，我希望得到你的协议，谢谢〜

我已经添加了2个基于jquery UI效果的效果，它们是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中

这是我的代码：

(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);

如何淡化和滑动jQuery动画

3 个答案: