css3/jquery动画/转换/：如何使图像垂直向后移动？

我想做的事情在我这个图片的效果（按钮）css3/jquery动画/转换/：如何使图像垂直向后移动？

http://osc4.template-help.com/wt_32608/index.html# 我想使这个动画无论方法CSS3，HTML5的画布，JS

如果我将使用哈弗财产，我该怎么做图像幻灯片，并返回时roolout

2011-03-10 john

使用'顶部'[在CSS]其更可靠，并支持所有浏览器。 – Val 2011-03-10 12:26:14

首先，制作一个< div>，它将包含动画。

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

然后，将< img>放在里面。一些CSS

.image_holder { 
    overflow: hidden; 
}

而且也给< IMG>：

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

接下来，添加一些CSS样式到< DIV>像这样

.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

来源

2011-03-10 12:41:28 trusktr

这样的事情。

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

，但如果你给我们你的HTML结构的一些代码，以及一些aboute你的想法会更好。

来源

2011-03-10 12:30:21

这个想法是相同的例子 http://osc4.template-help.com/wt_32608/index.html# ，我会把我的HTML :) – john 2011-03-10 12:41:52

最简单的方法可能是将图像绝对位置，然后操纵top，像这样：

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

<script> 

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

</script>

阅读了jQuery这里动画文档：http://www.google.dk/search?sourceid=chrome&ie=UTF-8&q=jquery+animate

它不应该是很难找出:)

来源

2011-03-10 12:30:29

仍然是新的jQuery :) 我会尝试现在。 – john 2011-03-10 12:42:37

如果只是动画背景，你想有一个按钮，为什么不使用background-image和动画background-position使用jQuery？

来源

2011-03-10 12:47:26 Gareth

css3/jquery动画/转换/：如何使图像垂直向后移动？

回答

相关问题