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

您可以通过向 animate 发送属性映射来为多个 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中的第一个回复，希望得到您的同意，谢谢~

我已经添加了 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);
于 2014-06-12T02:59:26.850 回答