Question

I was wondering there type of API like onStart and onComplete from Mootools, it makes me curious where i get those APIs for jQuery… there an example script:

var slidez = null;
function closeOpen(ref) {
    //return
    if (ref != slidez && slidez.wrapper.offsetHeight > 0) {
        slidez.slideOut();
    }
}

window.addEvent('domready', function() {
    slidez = new Fx.Slide('hello_content', {
        duration: 1000,
        onStart: function(request) {
            if (this.wrapper.offsetHeight == 0) {
                closeOpen(slidez);
            }
        },
        onComplete: function(request) {
            if (this.wrapper.offsetHeight > 0) {
                new Fx.Scroll(window).toElement($('toggle_content'));
            }
        }
    });

    $('toggle_content').addEvent('click', function(e) {
        e = new Event(e);
        slidez.toggle();
        e.stop();
    });
    slidez.hide();
}); 

I tried to convert it to jQuery code, but sometimes it failed and i wasted of my time, i needed a help here…

Thanks in advance!

Answer 1

jQuery animations are not created as objects as in mootools, but rather are just methods called on elements. There is no onstart event – you would just call any onstart code before you call the animation method. The jquery equivelant of oncomplete is the callback argument to the animation method. The callback is called when the animation is complete.

$(function() {
    $("#toggle_content").click(function (e) {
        var toggle_content = this;
        $("#hello_content").slideToggle(1000, function () {
            if ($(this).height() > 0) {
                toggleContent.scrollIntoView();
            }
        });
    });
    $("#hello_content").hide();
});