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();
    });

});

如果您尝试在数字之间移动得太快，这可能会有点麻烦，而且动画越慢，这种情况只会变得更糟。但它确实让你真正接近我认为你想要完成的事情。