小编bus*_*ted的帖子

我在页面上有两个元素,我想通过CSS制作动画(特别是-webkit-animation).动画本身只是上下弹跳一个元素.一个元素总是显示和弹跳,另一个元素在鼠标悬停(悬停)之前不会动画.

我的问题是:无论何时启动第二个元素的动画,是否可以同步(两个元素同时达到它们的顶点等)动画跨两个元素？

这是我的HTML:

<div id="bouncy01">Drip</div>
<div id="bouncy02">droP</div>

和我的CSS:

@-webkit-keyframes bounce {
    0% {-webkit-transform: translateY(0px);}
    25% {-webkit-transform: translateY(-2px);}
    50% {-webkit-transform: translateY(-4px);}
    75% {-webkit-transform: translateY(-2px);}
    100% {-webkit-transform: translateY(0px);}
}
#bouncy01,
#bouncy02 {
    margin:10px;
    float: left;
    background: #ff0000;
    padding: 10px;
    border: 1px solid #777;
}
#bouncy01 {
    -webkit-animation:bounce 0.25s ease-in-out infinite alternate;
}
#bouncy02 {
    background: #ffff00;
}
#bouncy02:hover {
    -webkit-animation:bounce 0.25s ease-in-out infinite alternate;
}

最后,该问题的工作演示:http://jsfiddle.net/7ZLmq/2/

(看到问题,鼠标悬停在黄色块上)

我很难理解命名空间自定义事件应该如何在jQuery中工作.我从doc获得了一个印象,即触发命名空间自定义事件只会触发专门绑定到该事件的处理程序.相反,似乎命名空间几乎被忽略了.以下示例和实时代码:http://jsfiddle.net/kZCBw/1/

    $(document)
        .bind("reset.one", function(){ console.log("reset.one event detected");})
        .bind("reset.two", function(){ console.log("reset.two event detected");})
        .bind("cheese", function(){ console.log("cheese event detected");});

        $("#btn1").click(function(){
            console.log("firing reset.one event");
            $(this).trigger("reset.one");
        });
        $("#btn2").click(function(){
            console.log("firing reset.two event");
            $(this).trigger("reset.two");
        });
        $("#btn3").click(function(){
            console.log("firing reset event");
            $(this).trigger("reset");
        });

        //btn1 click should only trigger handlers bound to "reset.one"
        //and yet it triggers anything starting w/ "reset"

我错过了什么？

提前致谢!-matt

我有一个display: table-cell包含子div 的div使用...都使用基于百分比的维度.当该子div包含超过一定数量的文本(取决于字体大小)时,它将忽略其高度规则.

这是一个孤立的测试用例

单击"切换文本"按钮将演示此问题.它在Chrome和Safari中更为明显,但Firefox也出现了这个问题.

我希望.childdiv的高度为40px ......但它大约是290px(在Chrome和Safari中).同样,.table应该有240px的高度.

HTML:

<div class="main">
    <div class="item">
        <div class="table">
            <div class="table-cell">
                <div class="child">
                    <div class="child-inner">
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna, Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.main {
    position: relative; …

我正在尝试为正在绘制的圆圈制作动画 - 这是我正在做的简化版本:

http://jsfiddle.net/DQz37/1/

问题是:我在每个线段之间得到轻微的线条/失真.像这样:

我正在处理的限制是:

• 我需要在同一个画布上渲染多个圆圈,有时圆圈重叠
• 我需要使用透明度/ rgba着色来渲染圆圈
• 我需要为圆圈的渲染设置动画(所以它们看起来像是在绘制)

这是一个常见的问题吗？你怎么处理这种事情？