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動畫/轉換/：如何使圖像垂直向後移動？

回答

相關問題