Adding an animated transition to a third party jquery plugin - Dropit

Question

this is my first post here, I hope I too can contribute to something important someday :)

So.. I added a thid party jquery plugin to a site I am working on, the plugin can be found here http://dev7studios.com/dropit/

My question is, how can I add a simple transition to the hidden dropdown list so it can smoothly push down the content of the website? I added jQuery UI core, but the ('class', 1000) doesnt seem to apply to the *.js of the plugin..

Thank you all very much in advance! Cheers

Answer 1

Hi and welcome to StackOverflow :)

I downloaded the plugin and their code is pretty well formatted and commented.

If you go to lines 28 and 40 of dropit.js you will see that there is the code to "show" and "hide" the dropdown. Note that they are using the "hide()" and "show()" so you can go ahead and change it to animations/effects you like.

For example on line 36 you will find:

$(this).parents(settings.triggerParentEl).addClass('dropit-open').find(settings.submenuEl).show();

You can go an change that, for example, to something like this:

$(this).parents(settings.triggerParentEl).addClass('dropit-open').find(settings.submenuEl).fadeIn();

Pretty simple, right? So basically you will be chaning (in the .js) the "hide()" and "show()" transitions to some transitions you want to use.

EDIT: BTW, here are some effects/transitions you can use with jQuery: http://api.jquery.com/category/effects/