slideup,change content,then slide down with jQuery

Question

I develop following code to slide up register panel, then change its content and then slide down logged in panel.

function ValidLogin(data)
{
    var content = null;;
    content = '<a id="link-show" class="g-button g-button-red" href="<?php echo base_url(); ?>index.php/cv/show/';
    content += data.id;
    content += '">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;www.onlinecv.ir/index.php/cv/show/'
    content += data.id;
    content += '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
    content += 'رزومه ام را نشانم بده';

    content += '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a id="link-signout" class="g-button g-button-red" href="#';
    content += '">&nbsp;&nbsp;خروج&nbsp;&nbsp;'
    content += '</a>';
    content += '</span>'


    $("#signup-button").slideUp(1500).delay(1500);
    $("#signup-button").html(content).slideDown(1500);
}

but it changed content ,then slide it up and slide it down. what should I do to changing content after sliding up?

score 4 · Answer 1 · answered Jul 31 '12 at 15:00

4

The content enters before the slideUp. Do it this way:

$("#signup-button").slideUp(1500, function() {
    $("#signup-button").html(content);
}).slideDown(1500);

answered Jul 31 '12 at 15:00

Chibuzo

6,112
3
29
51

score 3 · Accepted Answer · answered Jul 31 '12 at 14:59

3

Use the callback function from slideup to wait until the slide finish and then execute what you want, for example:

$("#signup-button").slideUp(1500, function(){
    // do what you want here
    // then slidedown again :)
});

answered Jul 31 '12 at 14:59

Rafael Moni

656
1
10
22

score 1 · Answer 3 · answered Jul 31 '12 at 15:00

1

You can try this

var slider = $("#signup-button");
slider.slideUp(1500, function(){        
        slider.html(content).slideDown(1500);                        
});

See demo here http://jsfiddle.net/UdagC/

answered Jul 31 '12 at 15:00

Ole Melhus

1,899
12
17

score 1 · Answer 4 · answered Jul 31 '12 at 15:05

1

Try something like this;

$("#signup-button").slideUp('slow',function(){
     $("#signup-button").html( content ).slideDown('slow')
});

where 'slow' is what ever speed you actually want.

answered Jul 31 '12 at 15:05

Patrick Clancey

1,330
1
14
22

slideup,change content,then slide down with jQuery

4 Answers4