How to customize a drilldown panel to apply a jquery animation in simple XML?

[maurelio79]

Hi to all,

I successfully applied a custom jquery animation to panels already present in a dashboard when the page is loaded.
I'd like to do the same with panels that appear with a drilldown option. Is it possible in simple xml?
I think i have in some way to intercept the click event and apply my custom jquery animation, but how?

Thanks very much and regards.

[maurelio79 · Accepted solution]

Here i am.
Using CSS3, you can do something like this:

#panel3, #panel5 {
        -webkit-animation-timing-function: ease-out;
        -webkit-animation: mymoveA 3s  1;
        animation: mymoveH 3s 1;
        position: relative;
}

@-webkit-keyframes mymoveA {
        from {left: -1000px; }
        to {left: 0px; }
}

#panel4, #panel6 {
        -webkit-animation-timing-function: ease-out;
        -webkit-animation: mymoveB 3s  1;
        animation: mymoveB 3s 1;
        position: relative;
}

@-webkit-keyframes mymoveB {
        from {right: -1000px; }
        to {right: 0px; }
}

in this way, for example, these panels appears moving from left to normal position or right to normal position.
If someone needs more information or help, do not hesitate to ask.

Thanks and regards

[maurelio79]

If someone is interested, I did it with CSS3, but in jquery, I was not able to get this to work.

Bye

[MuS]

Do you mind sharing your css3 file an an answer?

[maurelio79]

Shure! I will share this afternoon, now i'm not at work.