Question

我正在浏览一个新项目的想法，这个动画引起了我的注意HERE。

在页面预加载时，盒子是分散的，但是在加载之后，分散的盒子会出现并在各自的位置对齐。这似乎是一个复杂的jQuery应用程序，但我愿意学习。

请欣赏任何帮助，也许是教程或起点的链接？

HERE是我布局的小提琴。我可以在我的布局中设置所有5个块来像上面的网站一样动画吗？

import java.awt.*;
import java.awt.event.*;

public class Gui extends Frame {

    public Gui() {
        setSize(400, 200);
        setLocationByPlatform(true);
        setLayout(new GridBagLayout());

        Canvas cd=new Canvas();
        // TODO: Override rather than set & make it preferred rather than actual
        cd.setSize(300, 100); 
        cd.setBackground(Color.BLUE);
        add(cd);

        addWindowListener(new WindowAdapter() {

            @Override
            public void windowClosing(WindowEvent arg0) {
                System.exit(0);
            }
        });
    }

    @Override
    public void paint(Graphics g) {
        //paintComponents(g); // wrong method!
        super.paint(g); // right method, but does nothing different to original!
    }

    public static void main(String[] args) {
        // TODO: AWT/Swing based GUIs should be started on the EDT
        Gui g=new Gui();
        g.setVisible(true);
    }
}

Answer 1

注意，可能需要在顶部css块进行调整才能达到预期的预期效果

尝试使用.animate()，.filter()，.addBack()

// select all elements to animate,
// apply beginning animation style,
// default syle
$("[class^=index], [id^=index]").css({
    "width":"0px",
    "height":"0px",
    "margin":"2px",
    "padding":"2px",
    "float":"left"
})
.filter(function() {
  return /^indexInfoBlock/.test(this.className)
})
.animate({
    width:"964px",
    height:"215px"
}, 5000)
.addBack()
.filter(function() {
  return /^indexBlockDiviver|indexSpotlightContainer/.test(this.id)
})
.animate({
    width:"1024px",
    height:"100px"
}, 5000)   
.addBack()
.filter(function() {
  return /^indexBlockDiviver/.test(this.className)
})
.animate({
    width:"1024px",
    height:"10px"
}, 5000)
.addBack()
.filter(function() {
  return /^indexBlockContainer/.test(this.id)
})
.animate({
    width:"1024px",
    height:"270px"
}, 5000)
.addBack()
.filter(function() {
  return /^indexSpotContainer/.test(this.className)
})
.animate({
    width:"334px",
    height:"270px"
}, 5000);

jsfiddle https://jsfiddle.net/rvtusu89/2/

如何为分散的div设置动画以在页面加载上对齐

1 个答案: