jquery - Jquery在包含div的悬停时动画和淡入

Question

我正在尝试为“标题”设置动画，以便在您将鼠标悬停在包含 div 时，它会淡入并向上设置 10px 的动画。这需要 javascript 还是可以通过 CSS 转换来完成？

现场示例

HTML

<div class="thumb">
    <div class="content">
        <div class="copy">
             <h1>Title</h1>
        </div>
    </div>
</div>

JS

$('.content').hide().removeClass('content').addClass('content-js');

$('.thumb').hover(function () {
    $(this).find('.content-js').fadeToggle();
});

Answer 1

看看这个小提琴： http: //jsfiddle.net/aGcpR/15/这是这段代码：

$(function() {
    $('.thumb').hover(
     function () {
        $('.copy h1').fadeIn(0).animate({'font-size':'20px'});
     },
     function () {
        $('.copy h1').animate({'font-size':'1px'}).fadeOut(0);
    });
});

我已将标题设置为 20 像素，以便您看得更清楚，但您可以看到 20 像素的位置。.hover() 将 2 个函数作为参数（即用逗号分隔）。第一个功能是当你 mouseenter 时，第二个是当你 mouseleave 时。请参阅此文档：http ://api.jquery.com/hover/

请注意，我将该元素的字体大小设置为 1px 并将其隐藏以开始：

.copy h1 {
    font-size: 1px;
    display: none;
}

Answer 2

您可以添加多个 css3 过渡（逗号分隔）。在你的情况下，我会使用不透明度和高度或字体大小。