jquery - 文本动画，两个单词组合在一起并创建一个新单词

Question

我公司的名称是另外两个单词的缩写。过去，我在 Flash 中创建了一个动画，其中两个单词“碰撞”产生了新单词(公司名称)。现在可以使用 CSS 和 JQuery 的某种组合来实现类似的动画吗？

示例:

Kyocera(表面上以其打印机而闻名)通过缩写两个词 - Kyoto 和 Ceramics 来得名。如果这是我的公司，我希望看到Kyoto与Ceramics碰撞，to从Kyoto<的末尾消失/strong>，麦克风从陶瓷末端掉落，生成的京瓷左侧显示在屏幕上。可行吗？

预先感谢您提供的所有帮助!

Answer 1

有淡出。可能将京都分成两个跨度“Kyo”和“to”，与其他词类似，激活您想要淡出的“to”“mics”部分的淡出，同时执行类似的操作以便隐藏元素和其余元素一起滑动:

$(".con .item").click(function() {
  $('.kill').hide("slow");    
});

如果 div 之间没有空格，效果会更好，当然这些可能是组成您 Logo 的一系列图像:

<div class="con">
    <div class="item keep">DIV 1</div><div class="item kill">DIV 2</div><div class="item kill">DIV 3</div><div class="item keep">DIV 4</div>
</div>

.item
{ 
    width:50px; 
    height:50px;
    margin:0;
    padding:0;
    display:inline-block;
    position:relative;            
    background:lime;
    cursor:pointer;        
}

更新 fiddle :http://jsfiddle.net/M8scf/31/

单词之间的空格将作为一个淡出部分包含在内，以便当元素淡出时，剩余的元素会一起滑动。当然，任何默认样式的边距/填充都需要调整，以使最后两部分足够接近，或者您可以在最后两部分组合在一起时立即隐藏它们，并且完整的单词会淡入。