Jquery Css Function slow to add property to div?

时间:2015-05-12 22:36:49

标签: javascript jquery html css

So basically I am trying to scale a div (starts from 0) when another is clicked but the scale origin should start from where the click happened. Sort of what apple does when you click on an app (the app opens up from where you clicked it).

The problem is trying to set the property of the scale origin which I do successfully but when i click on the div, this has no effect ! It only works when I set a timeout function to when I add the class that scales it fully

Class appeared to have been added before css is applied:

In [98]:

df = pd.DataFrame({'X': ['A','B','C','A','B','C','B','C','D','B','C','D'],
                       'Y': np.arange(12)})
df[0:6].groupby(['X']).count().add(df[6:].groupby(['X']).count(), fill_value=0)
Out[98]:
   Y
X   
A  2
B  4
C  4
D  2

Class is applied with a delay (which scales from the origin specified but takes time)

var xPosSTR = 30+'px';
var yPosSTR = 30+'px';

        $('.box-detail').css({
            'transform-origin':         '' + xPosSTR + ' ' + yPosSTR + ' 0px',
            '-webkit-transform-origin': '' + xPosSTR + ' ' + yPosSTR + ' 0px'
        });

        $(".box-detail").addClass("box-reveal-prop");

css: {

var xPosSTR = 30+'px';
var yPosSTR = 30+'px';

        $('.box-detail').css({
            'transform-origin':         '' + xPosSTR + ' ' + yPosSTR + ' 0px',
            '-webkit-transform-origin': '' + xPosSTR + ' ' + yPosSTR + ' 0px'
        });
         setTimeout(function(){
            $(".box-detail").addClass("box-reveal-prop");
         }, 2000);

Can I achieve the same thing without the timeout function, Thanks !

1 个答案:

答案 0 :(得分:2)

You would want to bind to bool running = true; SDL_Event event; while (running) { while (SDL_PollEvent(&event)) { switch (event.type) { case SDL_KEYDOWN: switch (event.key.keysym.sym){ case SDLK_RIGHT: buttons.setState(2); SDL_UpdateWindowSurface(window); case SDLK_LEFT: buttons.setState(1); SDL_UpdateWindowSurface(window); case SDLK_INSERT: if (buttons.getState() == 1){ buttons.setState(3); SDL_UpdateWindowSurface(window); SDL_Delay(50); buttons.setState(1); SDL_UpdateWindowSurface(window); } else{ if (buttons.getState() == 2){ buttons.setState(4); SDL_UpdateWindowSurface(window); SDL_Delay(50); buttons.setState(2); SDL_UpdateWindowSurface(window); } else{ break; } } default: running = true; } case SDL_QUIT: running = false; SDL_DestroyWindow(window); SDL_Quit(); break; } } }

transitionend

You may see the js fiddle here