Question

我想在我的图像（按钮）中执行此效果

http://osc4.template-help.com/wt_32608/index.html# 无论CSS3，HTML5 canvas，JS

方法如何，我想制作这个动画

如果我将使用悬停属性，如何在漫游时将图像滑动并返回

Answer 1

首先，制作一个＆lt; div>这将包含动画。

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

然后，放置＆lt; img＆gt;内部。

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

接下来，将一些CSS样式添加到＆lt; div>像这样：

.image_holder {
    overflow: hidden;
}

还有一些CSS到＆lt; img＆gt;：

.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动画做到这一点。在Google上搜索“CSS3过渡”：http://www.google.com/search?btnG=1&pws=0&q=CSS3+transitions

Answer 2

像这样的东西。

$(".items").each(function() {
$(this).mouseover(function(){
$(this).find(".inner").slideDown();
});
$(this).mouseout(function(){
$(this).find("inner").slideUp();
});
});

但是如果你给我们一些你的html结构的代码会更好，并且有些东西可以超出你的想法。

Answer 3

最简单的方法可能是绝对定位图像，然后操纵top，如下所示：

<img id="myimage" style="position: absolute" src="whatever"/>

<script>

$('#myimage').animate({top: '<whatever>px' },someDuration);

</script>

在此处阅读jQuery animate docs：http://www.google.dk/search?sourceid=chrome&ie=UTF-8&q=jquery+animate

应该不难理解：）

Answer 4

如果只是您想要的按钮的动画背景，为什么不使用background-image并使用jQuery为background-position设置动画？

css3 / Jquery动画/过渡/：如何使图像垂直向后移动？

4 个答案: