Toggle div with easing

Question

I've got a link, when clicking this I want a div to slideIn with easing, and then clicking the link again, it should close the div, with easing...

I've looked at jQuery easing plugin, but it doesn't work with jQuery 1.5.1? Any ideas to what I can do, and how?

Right now I only got a slideToggle function, which doesn't have easing?

$('.open-mypage').click(function () {
    $('#mypage-info').slideToggle('2000', function () {
        // Animation complete.
    });
});

Answer 1

jQuery slideToggle() documentation says :

.slideToggle( [ duration ], [ easing ], [ callback ] ) (version added: 1.4.3)

---

duration A string or number determining how long the animation will run.

easing A string indicating which easing function to use for the transition.

callback A function to call once the animation is complete.

As you can see, there's a parameter called [ easing ], its description is :

Easing

As of jQuery 1.4.3, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.

So you have 2 choices :

1) You use one the available easing :

$('.open-mypage').click(function () {
    $('#mypage-info').slideToggle('2000', "swing / linear", function () {
        // Animation complete.
    });
});

2) You include jQuery UI in your page and use one of its 32 easings :

$('.open-mypage').click(function () {
    $('#mypage-info').slideToggle('2000', "easeOutBounce", function () {
        // Animation complete.
    });
});

You can see a jsFiddle example here

Answer 2

I have got a link, Here's an example for different types of toggle Effects.

Toggle div with different Effects - Jquery Live demo

Select the effect type from the drop down and when click,this makes a toggle effects that looks a lot better.

I have tried, It working fine.

$(function () {
    var index = 0;
    $("#btnChangeEffect").click(function () {
        var effectType = $("#effectTypes").val();
        $("#dvContent").toggle(effectType, 600);
    });
});



<select name="effects" id="effectTypes" class="ddl">
    <option value="blind">Blind</option>
    <option value="bounce">Bounce</option>
    <option value="clip">Clip</option>
    <option value="drop">Drop</option>
    <option value="explode">Explode</option>
    <option value="fold">Fold</option>
    <option value="highlight">Highlight</option>
    <option value="puff">Puff</option>
    <option value="pulsate">Pulsate</option>
    <option value="scale">Scale</option>
    <option value="shake">Shake</option>
    <option value="size">Size</option>
    <option value="slide">Slide</option>
</select>