CODEWITHSUNDEEP
jqueryajax
klark
klark

Reputation: 494

When use with after(), slidedown function does not work

I've tried many way to sliding down a new element created with after() using examples I found on internet but it does not work.

I tried these possibilities without success with the following code , the element appears quickly without slidedown effect 

$this.after("<p id='comment' style='display:none'>" + data + "</p>");
$("#comment").slideDown(2000);

with the following code, the element is not displayed

$(this).after("<div id='comment' style='display:none'>" + data + "</p>", function(){
                            $("#comment").slideDown().css('display', 'inline');
                        });

with the following code, the element is not displayed

$(this).after("<div id='comment' >" + data + "</p>", function(){
                            $("#comment").slideDown(2000);
                        });

Maybe, I should clarify that the code is within ajax

$(document).ready(function() {
        $(function() {
            $("#button<?php echo $data['id']; ?>").click(function(e) {
                var $this = $(this);
                $.ajax({
                    type: "POST",
                    url: "<?php echo Yii::app()->createUrl('comment/create'); ?>",
                    success: function(data) {

                       $this.after("<p id='comment' style='display:none'>" + data + "</p>");
                       $("#comment").slideDown(2000);
}
                });
            });

        });
    });

Thank you in advance for your help.

Upvotes: 0

Views: 44

Answers (2)

Manoj
Manoj

Reputation: 73

Try this : Create a custom function to trigger slideDown, call it in your ajax call success.

 $(document).ready(function() {
        $(function() {
        function mySlideFn(){
           $("#comment").slideDown(2000);
        }
            $("#button<?php echo $data['id']; ?>").click(function(e) {
                var $this = $(this);
                $.ajax({
                    type: "POST",
                    url: "<?php echo Yii::app()->createUrl('comment/create'); ?>",
                    success: function(data) {

                       $this.after("<p id='comment' style='display:none'>" + data + "</p>");
                       mySlideFn();
            }
                });
            });

        });
    });

Upvotes: 1

rink.attendant.6
rink.attendant.6

Reputation: 46267

The following code seems to work fine:

$(this).after('<p class="comment" style="display: none;">A comment</p>');
$('.comment').slideDown(2000);

Perhaps in your first example you're not referencing $(this) properly. See jsFiddle

Upvotes: 0

Related Questions