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

Why don't you use the newest jquery. Isn't it like 1.8.9 or something? — Vadiklk, May 25 '11 at 08:01
It's 1.6.1.... But im using something called Parallax also, that only works with jQuery 1.5.1 and before — , May 25 '11 at 08:02
Ahhh, no, now im using 1.6.1... But still doesn't solve the above problem :) — , May 25 '11 at 08:04
What doesn't work in the easing plugin, checked it and it should work. — Vadiklk, May 25 '11 at 08:05
slideToggle supports easing. From jQuery docs: .slideToggle( [ duration ], [ easing ], [ callback ] ) — Litek, May 25 '11 at 08:07
old, but I'll quickly mention jquery now has a migrate file to help with using the latest versions of jquery with older code no longer supported: http://blog.jquery.com/2013/05/08/jquery-migrate-1-2-1-released/ — darcher, Jan 03 '14 at 17:49

Sylvain · Accepted Answer · 2012-10-27T21:31:45.930

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

If you don't use jQuery UI's other parts, you can do a custom build at http://jqueryui.com/download by selecting only the `Effects Core`. — DarthJDG, May 25 '11 at 08:25

score 0 · Answer 2 · edited May 31 '21 at 20:40

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>

Toggle div with easing

2 Answers2

Linked