CODEWITHSUNDEEP
jqueryanimate.csspnotify
GGio
GGio

Reputation: 7653

JQuery PNotify animate & attention seekers dont work together

Here is fiddle: Fiddle

Comment out the animate: {} part and then click button to see that 'jello' animation works without it, with it the initial loading animation works but jello doesnt.

I am using PNotify plugin. Here is my setup:

PNotify.prototype.options.styling = "jqueryui";
var myStack = {"dir1":"down", "dir2":"left", "push":"top"};

var notification = new PNotify({
   title: "Test Title",
   text: "Test Content",
   stack: myStack,
   icon: 'glyphicon glyphicon-info-sign',
   type: 'info',
   // IF I COMMENT THIS OUT, THE "jello" effect works fine but then
   // when showing/hiding the notification it does not use the bellow effects
   animate: {
        animate: true,
        in_class: 'bounceInDown',
        out_class: 'bounceOutUp'
    },
    buttons: {
        sticker: false,
        closer_hover: false
    },
    mobile: {
        swipe_dismiss: true,
        styling: true
    },
    nonblock: {
        nonblock: false,
        nonblock_opacity: .2
    },
});

Then I have a click event on button to activate the "jello" effect:

$('#clickMeButton').on('click', function() {
    // if animate above is commented out, this works, otherwise
    // this does not work
    notification.attention('jello');
});

I need both effects to work, when notification shows up it has to bounce down with that effect, when clicked it has to do 'jello' effect and when hiding/closing it has to do bounce up effect.

Upvotes: 1

Views: 1088

Answers (1)

aasiph
aasiph

Reputation: 257

This works

    $('#clickMeButton').on('click', function() {
        notification.get().removeClass('animated bounceInDown bounceOutUp');
        notification.attention('jello');
});

The class needs to be removed first which is not done in the intention function in PNotify library.

notice.attention = function(aniClass, callback){
            notice.elem.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
                notice.elem.removeClass(aniClass);
                if (callback) {
                    callback.call(notice);
                }
            }).addClass("animated "+aniClass);

You can change the code of PNotify library which will be more easier for future work with other animation presets. Some changes to the above mentioned original code is below. Just add the line i have mentioned in comment.

notice.attention = function(aniClass, callback){
            //just add the line below
            notice.elem.removeClass(this.options.animate.in_class + " " + this.options.animate.out_class);
            notice.elem.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
                notice.elem.removeClass(aniClass);
                if (callback) {
                    callback.call(notice);
                }
            }).addClass("animated "+aniClass);
        };

you can now straight away call the attention function

$('#clickMeButton').on('click', function() {
            notification.attention('jello');
    });

Upvotes: 1

Related Questions