滑动,更改内容,然后使用jQuery向下滑动

时间:2012-07-31 14:54:34

标签: jquery slide slidedown slideup

我开发了以下代码以向上滑动注册面板,然后更改其内容,然后向下滑动登录面板

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);
}

但它改变了内容,然后向上滑动并向下滑动。 滑动后如何更改内容?

4 个答案:

答案 0 :(得分:4)

内容在slideUp之前进入。这样做:

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

答案 1 :(得分:3)

使用slideup中的回调函数等到幻灯片完成后再执行您想要的操作,例如:

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

答案 2 :(得分:1)

你可以试试这个

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

在此处查看演示http://jsfiddle.net/UdagC/

答案 3 :(得分:1)

尝试这样的事情;

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

“慢”是你真正想要的速度。