javascript - css3/Jquery 动画/过渡/: How to make image move vertically and back?

Question

我想在我的图像(按钮)中做这个效果

http://osc4.template-help.com/wt_32608/index.html#我想用 CSS3、HTML5 canvas、JS 制作这个动画

如果我要使用 Hover 属性，我怎样才能让图像在 roolout 时滑动和返回

Answer 1

首先，制作一个包含动画的

。

<div id="image_holder"></div>

然后，将 放在里面。

<div id="image_holder_1" class="image_holder">
    <img id="image_1" class="image" ..... />
</div>

接下来，向

添加一些 CSS 样式，如下所示:

.image_holder {
    overflow: hidden;
}

还有 < img > 的一些 CSS:

.image {
    position: relative;
}

现在，使用 jQuery 为图像制作动画。具体来说，您将为图像的“顶部”CSS 属性设置动画:

$('#image_holder_1').hover( function() {
    $('#image_1').animate({
        top: '-' + $(this).height() + 'px'
    });
}, function() {
    $('#image_1').animate({
        top: '0px'
    });
});

在此处查看实际效果:http://jsfiddle.net/trusktr/7hTDu/

或者，您可以使用 CSS3 动画来实现。在谷歌上搜索“CSS3 转换”:http://www.google.com/search?btnG=1&pws=0&q=CSS3+transitions

关于javascript - css3/Jquery 动画/过渡/: How to make image move vertically and back?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5259499/

上一篇：html - 为使 IE 正确呈现而推荐的 css/js 堆栈

下一篇：html - 在 Django 中操作 oembed