jQueryUI Effect - Where is the code ?

[Siberian]

I'm having some problems understanding how to download an effect from jQueryUI. There is an effect I want on this there is no code or script to download ?

[pritaeas]

http://jqueryui.com/download/

Download everything, it's included.

[Siberian]

Shouldn't there be a ease-script withint the download, I'm not seeing one ?

[pritaeas]

No. Quoted from your link:

"jQuery core ships with two easings: ..."

It's part of the animate method.

http://gsgd.co.uk/sandbox/jquery/easing/

Waste of time IMO, it just adds more bloat for little or no purpose.

A lot of web devs use css transitions now anyway. It is good to see you finally using jquery and jqueryui now. It was painful watching you mess around with native javascript :)

[Siberian]

Prit - Unless I'm blind, there are no easing scripts in my download ?

iamthwee - Transitions can make a div appear and disappear with effect ? I never stopped learning Javacsript, what was so painful ? :)

[pritaeas]

there are no easing scripts in my download ?

It's part of a method (function), not a script.

See the attachment, I downloaded the jQueryUI Core only. Search for animate and/or easing.

[Siberian]

I'm blind !
There is no animate or easing within the zip file, is it within a script ?

[pritaeas]

Open js/jquery-1.10.2.js and do a text search.

[Siberian]

Oh ! I had to search within the script file, news to me !

I assume I have to extract the function out of the file and place it into a new file ?

I found the following, not sure if this related to the jQueryUI I need as the descriptions are a little vague IMO.

function propFilter( props, specialEasing ) {
    var index, name, easing, value, hooks;

    // camelCase, specialEasing and expand cssHook pass
    for ( index in props ) {
        name = jQuery.camelCase( index );
        easing = specialEasing[ name ];
        value = props[ index ];
        if ( jQuery.isArray( value ) ) {
            easing = value[ 1 ];
            value = props[ index ] = value[ 0 ];
        }

        if ( index !== name ) {
            props[ name ] = value;
            delete props[ index ];
        }

        hooks = jQuery.cssHooks[ name ];
        if ( hooks && "expand" in hooks ) {
            value = hooks.expand( value );
            delete props[ name ];

            // not quite $.extend, this wont overwrite keys already present.
            // also - reusing 'index' from above because we have the correct "name"
            for ( index in value ) {
                if ( !( index in props ) ) {
                    props[ index ] = value[ index ];
                    specialEasing[ index ] = easing;
                }
            }
        } else {
            specialEasing[ name ] = easing;
        }
    }
}

[pritaeas]

I assume I have to extract the function out of the file and place it into a new file ?

Why would you extract it?

[Siberian]

I was informed that I had to, which is why I asked ! There is nothing more to do besides have jquery-1.10.2.js script within my page, and copy the ease-in-out code into another script that I want to use as the jQueryUI effect ?

[JorgeM]

There's nothing to extract. You download the appropriate jQuery files, link them in your web app and use the methods according to the jQuery documentation.

[Siberian]

JorgeM - Including jQueryUI, correct ?

[JorgeM]

Yes. You just need the files.

[Siberian]

It is as straight forward as the following code piece when using jQueryUI ?

$(#"boxbounce").easeInOutBounce()

[JorgeM]

No, easing is used in combination with jQuery methods. JQuery has basic easing like linear and swing. The jQueryUI extends it.

For example, you can use theses UI easing with the .animate() method.

[Siberian]

How would I create a easeInOutBounce by placing the name of the effect within the .animate() method ?

[JorgeM]

Yes, if you look at the animate method, instead of using linear or swing, you can specify one if these UI easing options.

[Siberian]

Something like this, then I add the event for which the anchor should trigger in my case the anchor will cause a div to show and apply the animate property ?

$("#open").click(function() {
.animate(easeInOutBounce)
)};