CODEWITHSUNDEEP
javascriptjquery
Rahul Desai
Rahul Desai

Reputation: 15481

.slideDown() not working

This should be easy but I checked on google and did not find any info on this.

I am doing: 

        $notification.slideDown(1000, function(){
            $('#notifications').append($notification);
        });

However it is not sliding down. It is getting displayed without any animation. No error either.

.slideUp() is working properly. What am I doing wrong here?

jsFiddle

Upvotes: 0

Views: 466

Answers (3)

Zaheer Ahmed
Zaheer Ahmed

Reputation: 28528

slideDown documentation says:

$notification.slideDown(1000, function(){});

here function executes on sliding complete. So you need to append hidden element then slidDown to show.

$('#notifications').append($notification.hide());
$notification.slideDown(1000);

Here is demo

Upvotes: 0

Croot
Croot

Reputation: 331

You had two minor issues, first your .notification element needs to be hidden to be able to slideDown().

.notification{
    display: none;
}

Secondly, you were trying to animate in an element that doesn't exist until the animation is complete :)

    $notification.slideDown(1000, function(){
        $('#notifications').append($notification);
    });

Updated script below. PS: Don't forget to add the CSS snipplet.

$(document).ready(function(){
    CKEDITOR.replace( 'description' );

    $('#title').focus();

    $('form').submit(function(event){
        event.preventDefault();

        var html=CKEDITOR.instances.description.getSnapshot();

        var $closeButton = $('<img class="closeButton" src="http://www.tunesdiary.com/static/images/icon_grey_cross.gif">');
        var $title = $('<span></span>').addClass('title').text($('#title').val());
        var $description = $('<span></span>').addClass('description').html(html);
        var $notification = $('<div></div>').append($closeButton).append($title).append($description).addClass('notification');
        $('#notifications').append($notification);
        $notification.slideDown(1000);

        $closeButton.click(function(){
            $(this).parent().slideUp();
        });
    });

});

Upvotes: 0

Anton
Anton

Reputation: 32581

Change

  $notification.slideDown(1000, function () {
     $('#notifications').append($notification);
 });

to

  $('#notifications').append($notification.hide());
        $notification.slideDown(1000);

The reason why slideDown doesn't work is because the element is visible when you are appending it

DEMO

Also note that when you slideUp the notification you should remove it because otherwise you'll have multiple notifications just taking up place

$closeButton.click(function () {
    $(this).parent().slideUp(function () {
        $(this).remove();
    });
});

Upvotes: 2

Related Questions