编写回调函数

时间:2010-09-18 16:28:21

标签: javascript jquery javascript-events callback

我正在使用jQuery编写这样的东西:

    $('#current_image').fadeOut(function(){
        $('#current_image').attr('src',newImage).show();
    });

这很可爱,一旦fadeOut完成,嵌套位就会执行。

我想在这里创建自己的函数来取代fadeOut。我的函数会是什么样的,这样代码才能起作用?

    $('#current_image').customFadeOut(function(){
        $('#current_image').attr('src',newImage).show();
    });

1 个答案:

答案 0 :(得分:3)

关键是将函数引用传递给您定义的原型方法,并将函数传递给$.animate或者您在内部使用的任何jquery动画函数。

HTML:

<div id="blah" style="color:#fff; opacity:1; background:black; height:50px; position:relative; ">fsdljfdsjfds</div>
<a id="click" href="#">fjsd</a>

JS:

$.fn.customFadeOut = function (callback) {
    return $(this).animate({
        opacity: 0.25,
        fontSize: "3em",
        height: 'toggle'
    }, 5000, function () {
        callback.apply(this)
    });

}

$('#click').click(function () {
    $('#blah').customFadeOut(function () {
        alert('hi')

    })

})​

Live Demo