jquery - ホバリング時にテキストを表示するにはどうすればよいですか?

Question

この効果は Flash で行われていることがわかりました。JavaScriptでこれを解決する同様の方法はありますか? 以下のリンクを見て、2013年にカーソルを合わせてください。

http://www.iflymagazine.com/?locale=no_en

Answer 1

以下は非常に基本的な例です。

<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

<div id='2'><span>2</span></div>
<div id='0'><span>0</span></div>
<div id='1'><span>1</span></div>
<div id='3'><span>3</span></div>

div{
    height:100px;
    width:100px;
    color: white;
    background: red;
    display:inline-block;
    text-align:center;
}
span{
    font-size:125px;
    line-height:-10px;
}

$(function () {
    $('div').mouseenter(function () {
        $(this).stop(true).animate({backgroundColor: 'white', color: 'red'}, 500, 'easeInQuint');
    });

    $('div').mouseleave(function () {
        $(this).stop(true).animate({backgroundColor: 'red', color: 'white'}, 500, 'easeInQuint');
    });
});

必要なスライド効果がありません。そのためには、複数の要素をいじって、それらを交換する必要があると思います。

編集：私はあなたが望んでいたものをもう一度見て、これを作りました：

.wrapper{
    position:relative;
    display:inline-block;
    width:100px;
    height:100px;
}
.number{
    position:absolute;
    bottom:0px;
    left:0px;
    height:100px;
    width:100px;
    color: white;
    background: red;
    display:inline-block;
    text-align:center;
    z-index:2;
}
.text{
    position:absolute;
    display:inline-block;
    z-index:1;
    top:0px;
    left:0px;
    height:100px;
    width:100px;
    color: black;
    background: gray;
    font-size:8pt;
}
.spnNum{
    font-size:125px;
    line-height:-10px;
}

<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

<div class='wrapper'>
    <div class='number' id='2'><span class='spnNum'>2</span></div>
    <div class='text' id='t2'>
        <span> Text Goes in here to be displayed when the number is hidden</span>
    </div>
</div>
<div class='wrapper'>
    <div class='number' id='0'><span class='spnNum'>0</span></div>
    <div class='text' id='t0'>
        <span> Text Goes in here to be displayed when the number is hidden</span>
    </div>
</div>
<div class='wrapper'>
    <div class='number' id='1'><span class='spnNum'>1</span></div>
    <div class='text' id='t1'>
        <span> Text Goes in here to be displayed when the number is hidden</span>
    </div>
</div>
<div class='wrapper'>
    <div class='number' id='3'><span class='spnNum'>3</span></div>
    <div class='text' id='t3'>
        <span> Text Goes in here to be displayed when the number is hidden</span>
    </div>
</div>

$(function () {
    $('.number').mouseenter(function(){
        $(this).slideUp(200);
    });

    $('.text').mouseleave(function(){
        $(this).prev().slideDown();
    });

});

数字の間をすばやく移動しようとすると、少しバグが発生する可能性があり、アニメーションが遅くなるほど悪化します。しかし、それはあなたが達成しようとしていることに本当に近づくと思います.