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

我将动画标题设置为20px，这样你就可以更好地看到它，但你可以看到它说的是20px。 .hover（）将2个函数作为参数（即用逗号分隔）。第一个功能是当你进入mouseenter时，第二个功能是你的mouseleave。请参阅此文档：http://api.jquery.com/hover/

注意，我将该元素的font-size设置为1px并将其隐藏起来：

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

Answer 2

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

Jquery动画并在包含div的悬停时淡入

2 个答案: