John Doeherskij
John Doeherskij

Reputation: 2577

How to make fade animation in nyroModal make faster?

Anybody knows how to speed up the fade in and fade out animation of nyroModal?

Right now I am intializing it like this :

<a href="demoSent.php" class="nyroModal" rev="modal">Ajax without closing</a>
<script type="text/javascript">
$(function() {
  $('.nyroModal').nyroModal();
});
</script>

And that's all.

However, the animation after clicking my links for the modal box is a little bit slow for my liking.

How can I make it faster? The documentation for nyroModal is quite difficult to understand, at least for me, so, any advice will be helpful.

UPDATE: In the jquery file jquery.nyroModal.custom.js is this code for the animation, at least I guess:

/*
 * nyroModal v2.0.0
 *
 * Fade animations
 *
 * Depends:
 *
 */
jQuery(function($, undefined) {
    $.nmAnims({
        fade: {
            showBg: function(nm, clb) {
                nm.elts.bg.fadeTo(250, 0.7, clb);
            },
            hideBg: function(nm, clb) {
                nm.elts.bg.z(clb);
            },
            showLoad: function(nm, clb) {
                nm.elts.load.fadeIn(clb);
            },
            hideLoad: function(nm, clb) {
                nm.elts.load.fadeOut(clb);
            },
            showCont: function(nm, clb) {
                nm.elts.cont.fadeIn(clb);
            },
            hideCont: function(nm, clb) {
                nm.elts.cont.css('overflow', 'hidden').fadeOut(clb);
            },
            showTrans: function(nm, clb) {
                nm.elts.load
                    .css({
                        position: nm.elts.cont.css('position'),
                        top: nm.elts.cont.css('top'),
                        left: nm.elts.cont.css('left'),
                        width: nm.elts.cont.css('width'),
                        height: nm.elts.cont.css('height'),
                        marginTop: nm.elts.cont.css('marginTop'),
                        marginLeft: nm.elts.cont.css('marginLeft')
                    })
                    .fadeIn(function() {
                        nm.elts.cont.hide();
                        clb();
                    });
            },
            hideTrans: function(nm, clb) {
                nm.elts.cont.css('visibility', 'hidden').show();
                nm.elts.load
                    .css('position', nm.elts.cont.css('position'))
                    .animate({
                        top: nm.elts.cont.css('top'),
                        left: nm.elts.cont.css('left'),
                        width: nm.elts.cont.css('width'),
                        height: nm.elts.cont.css('height'),
                        marginTop: nm.elts.cont.css('marginTop'),
                        marginLeft: nm.elts.cont.css('marginLeft')
                    }, function() {
                        nm.elts.cont.css('visibility', '');
                        nm.elts.load.fadeOut(clb);
                    });
            },
            resize: function(nm, clb) {
                nm.elts.cont.animate({
                    width: nm.sizes.w,
                    height: nm.sizes.h,
                    top: (nm.getInternal().fullSize.viewH - nm.sizes.h - nm.sizes.hMargin)/2,
                    left: (nm.getInternal().fullSize.viewW - nm.sizes.w - nm.sizes.wMargin)/2
                }, clb);
            }
        }
    });
    // Define fade aniamtions as default
    $.nmObj({anim: {def: 'fade'}});
}); 

But I am clueless how to alter this code so the animation is faster.

Any idea?

Upvotes: 1

Views: 123

Answers (1)

Imazin
Imazin

Reputation: 26

        showBg: function(nm, clb) {
            nm.elts.bg.fadeTo(200, 0.7, clb);
        },
        hideBg: function(nm, clb) {
            nm.elts.bg.fadeOut(200, clb);
        },
        showLoad: function(nm, clb) {
            nm.elts.load.fadeIn(200, clb);
        },
        hideLoad: function(nm, clb) {
            nm.elts.load.fadeOut(200, clb);
        },
        showCont: function(nm, clb) {
            nm.elts.cont.fadeIn(200, clb);
        },
        hideCont: function(nm, clb) {
            nm.elts.cont.css('overflow', 'hidden').fadeOut(200, clb);
        },

Upvotes: 0

Related Questions