jquery - 同时平滑地重新排序并在悬停时出现新的词段

Question

我想在页面上方放置一个标题(假设):DUKE YAHA
悬停时，我希望文本平滑过渡(实际上使用 CSS3 过渡，而不是立即更改)到:ARCHDUKEMAN AYHATON

所以，在DUKE前后添加的是ARCH和MAN；而在YAHA中，Y和A切换位置，后面加了TON。所以有两件事:

1. 添加单词；
2. 字母互换

我想要实现的是DUKE向左移动，为周围的ARCH和MAN腾出空间；并且您看到 YAHA 中的字母 Y 和 A 实际上交换了位置。

我并不是要找人帮我把它全部写出来，因为工作量很大，但如果有人能给我指出正确的方向，那就太棒了!

例如，要实现这一点，我应该看看 jQuery 而不是 CSS3(我一直在尝试，但没有成功)？除了 CSS3 转换之外，我是否应该使用 CSS3 动画来实现这一点？

Answer 1

你能试试这个吗:

$( ".top" ).hover(function() {
    $( this ).find('.letters').addClass( "active" );
  });

.letters{
        -moz-transition: all 1.5s ease-in-out;
        -webkit-transition: all 1.5s ease-in-out;
        -o-transition: all 1.5s ease-in-out;
        -ms-transition: all 1.5s ease-in-out;
        transition: all 1.5s ease-in-out;
        float: left;
        position:relative ;
    }
    .first , .third,.seven{
        opacity: 0;
    }
    .top{
        left: 55%;
        position: absolute;
        transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        width: 400px;
    }
    .first, .third,.seven{
        -webkit-transition-delay: 1s;
        -moz-transition-delay: 1s;
        -o-transition-delay: 1s;
        -ms-transition-delay: 1s;
        transition-delay: 1s;
    }
    .second{
        -webkit-transform: translate3d(35px,0px,0px);
        -moz-transform: translate3d(35px,0px,0px);
        -o-transform: translate3d(35px,0px,0px);
        -ms-transform: translate3d(35px,0px,0px);
        transform: translate3d(35px,0px,0px);
        -webkit-transition-delay: 0s;
        -moz-transition-delay: 0s;
        -o-transition-delay: 0s;
        -ms-transition-delay: 0s;
        transition-delay: 0s;

    }
 
    .fourth{
            transform: translate3d(11px,0px,0px);
            -webkit-transform: translate3d(11px,0px,0px);
            -moz-transform: translate3d(11px,0px,0px);
            -o-transform: translate3d(11px,0px,0px);
            -ms-transform: translate3d(11px,0px,0px);
            -webkit-transition-delay: 2s;
            -moz-transition-delay: 2s;
            -o-transition-delay: 2s;
            -ms-transition-delay: 2s;
            transition-delay: 2s;

        }
    .fivth{
            transform: translate3d(-10px,0px,0px);
            -webkit-transform: translate3d(-10px,0px,0px);
            -moz-transform: translate3d(-10px,0px,0px);
            -o-transform: translate3d(-10px,0px,0px);
            -ms-transform: translate3d(-10px,0px,0px);
            -webkit-transition-delay: 1s;
            -moz-transition-delay: 2s;
            -o-transition-delay: 2s;
            -ms-transition-delay: 2s;
            transition-delay: 2s;
        }

    .active{
        opacity: 1;
        -webkit-transform: translate3d(0px,0px,0px);
        -moz-transform: translate3d(0px,0px,0px);
        -o-transform: translate3d(0px,0px,0px);
        -ms-transform: translate3d(0px,0px,0px);
        transform: translate3d(0px,0px,0px);
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <div class="top">
        <span class="letters first">ARCH  </span>
        <span class="letters second"> DUKE </span>
        <span class="letters third"> MAN </span>
        <span class="letters">&nbsp;</span>
        <span class="letters fourth">A</span>
        <span class="letters fivth">Y</span>
        <span class="letters six">HA</span>
        <span class="letters seven">TON</span>
    </div>