Animate bootstrap fluid grid

Question

I'm wondering if you could offer some advice here on how to write Javascript animation code for performing great animation on Bootstrap fluid grid system.

My idea for is that I have a simple page that comes with search field and a button. When user enters some keywords and presses the button to submit, user get a returned result set and gets display in the grid, in a cool animated behaviour.

I'm thinking along the line of Script.aculo.us, and I check their Effect.appear() and Effect.fade() examples. I want to combine these two effects on fluid grid such that when an outline grid will appear (in a delayed manner) and the returned data that appears in the rows/columns of the grid will have the fade effect. That should do finish the job.

I'm wondering if I could incorporate the great animation framework of Script.aculo.us into Boostrap and get these two work with each other as I build my language translation app.

Hope that makes sense..

Answer 1

I finally resolved this problem.

I got it working.

There's an ordered sequence of how I should load Scriptaculous and Bootstrap js libraries.

It turns out I need to load the core Bootstrap js libraries in tag first before I load Scriptaculous js's!

Then I need to include jQuery.noConflict method as these two core libraries use jquery a lot so there's going to be some conflicts that will be occurred when writing jquery code.

After all that, it works fine from there!