Question

鼠标悬停时，我需要一个弹出式动画，当您在“驾车流量/货币化内容/增加参与度”上移动鼠标时，https://www.taboola.com/

似乎类.cta3-items上的CSS动画。我不确定它是否也使用jQuery。

有谁可以举个简单的例子吗？

非常感谢！

Answer 1

使用animate.css css库实现效果并添加像这样的jqquery

$(document).ready(function(){
    $('.yourdiv').hover(function(){
        $(this).addClass('animated youranimationname');
    }).mouseleave(function(){
        $(this).removeCLass('animated youranimationname');
    });
});

Answer 2

这里有点简单，下次请在问题说明中发布现有代码和/或链接到小提琴。

我只是使用CSS3转换属性并在jQuery中切换类。

<强> CSS3

public void init(GLAutoDrawable d) {

        [...]

            int perVertexFloats = (3+4+2+3);
            float vertexData[] = loadVertexData("ball.vbo", perVertexFloats);
            float vertexData1[] = loadVertexData("bar.vbo", perVertexFloats);

            vertNo = vertexData.length / perVertexFloats;
            FloatBuffer dataIn = Buffers.newDirectFloatBuffer(vertexData.length);
            dataIn.put(vertexData);
            dataIn.flip();

            vertNo1 = vertexData1.length / perVertexFloats;
            FloatBuffer dataIn1 = Buffers.newDirectFloatBuffer(vertexData1.length);
            dataIn1.put(vertexData1);
            dataIn1.flip();

         // generating vertex VBO
            gl.glGenBuffers(1, vertBufID, 0);
            gl.glBindBuffer(GL2.GL_ARRAY_BUFFER, vertBufID[0]);
            gl.glBufferData(GL2.GL_ARRAY_BUFFER, dataIn.capacity()*Buffers.SIZEOF_FLOAT, dataIn, GL2.GL_STATIC_DRAW);

         // generating vertex VBO2
            gl.glGenBuffers(1, vertBufID, 1);
            gl.glBindBuffer(GL2.GL_ARRAY_BUFFER, vertBufID[1]);
            gl.glBufferData(GL2.GL_ARRAY_BUFFER, dataIn1.capacity()*Buffers.SIZEOF_FLOAT, dataIn1, GL2.GL_STATIC_DRAW);

        }

public void display(GLAutoDrawable d) {

[...]

        // activating VBO
        gl.glTranslatef(-0.1f, -0.85f, 0.0f);
        gl.glScalef(0.3f, 0.3f, 0.3f);                              // resize the ball
        gl.glBindBuffer(GL2.GL_ARRAY_BUFFER, vertBufID[0]);
        int stride = (3+4+2+3)*Buffers.SIZEOF_FLOAT;
        int offset = 0;

     // activating VBO2
        gl.glTranslatef(2.0f, -0.2f, 0.0f);             
        gl.glScalef(3.0f, 3.0f, 3.0f);                              //resize the bar
        gl.glRotatef(90, 0.0f, 0.0f, 1.0f);     
        gl.glBindBuffer(GL2.GL_ARRAY_BUFFER, vertBufID[1]);


     // position
        gl.glVertexPointer(3, GL2.GL_FLOAT, stride, offset);
        gl.glEnableClientState(GL2.GL_VERTEX_ARRAY);

     // color
        offset = 0 + 3*Buffers.SIZEOF_FLOAT;
        gl.glColorPointer(4, GL2.GL_FLOAT, stride, offset);
        gl.glEnableClientState(GL2.GL_COLOR_ARRAY);

     // texture
        offset = 0 + (3+4)*Buffers.SIZEOF_FLOAT;
        gl.glTexCoordPointer(2, GL2.GL_FLOAT, stride, offset);
        gl.glEnableClientState(GL2.GL_TEXTURE_COORD_ARRAY);

        // normals
        offset = 0 + (3+4+2)*Buffers.SIZEOF_FLOAT;
        gl.glNormalPointer(GL2.GL_FLOAT, stride, offset);
        gl.glEnableClientState(GL2.GL_NORMAL_ARRAY);

     // bind texture
        if(mode == 0) {
          gl.glEnable(GL2.GL_TEXTURE_2D);
          gl.glBindTexture(GL2.GL_TEXTURE_2D, texID);
          gl.glBindTexture(GL2.GL_TEXTURE_2D, texID1);
        }else{
          gl.glDisable(GL2.GL_TEXTURE_2D);
          gl.glBindTexture(GL2.GL_TEXTURE_2D, 0);
        }

        // render data
        gl.glDrawArrays(GL2.GL_TRIANGLES, 0, vertNo);

     // render data2
        gl.glDrawArrays(GL2.GL_TRIANGLES, 0, vertNo1);


        gl.glDisableClientState(GL2.GL_VERTEX_ARRAY);
        gl.glDisableClientState(GL2.GL_COLOR_ARRAY);
        gl.glDisableClientState(GL2.GL_TEXTURE_COORD_ARRAY);
        gl.glDisableClientState(GL2.GL_NORMAL_ARRAY);
        gl.glDisable(GL2.GL_TEXTURE_2D);

        gl.glFlush();
    }

<强>的jQuery

.flip-target {
  transition: 0.6s;
  transform-style: preserve-3d;
  transform: rotateX(90deg);
  transform-origin:center bottom;
  opacity: 0;
}

.flip-target.flip {
  transform: rotateY(0deg);
  transform: translatey(-40px);
  opacity: 1;
}

Demo

鼠标悬停时弹出动画

2 个答案: