css3 / Jquery animation / transition /: Как заставить изображение двигаться вертикально и обратно?

Question

Я хочу сделать этот эффект на моем изображении (кнопка)

http://osc4.template -help.com / wt_32608 / index.html # Я хочу сделать эту анимацию любым методом CSS3, HTML5 canvas, JS

Если я буду использовать свойство Hover, как я могу сделать изображение скользящим и обратно при повороте

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

А также немного 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 переходы" в Google: http://www.google.com/search?btnG=1&pws=0&q=CSS3+transitions

Answer 2

Если вы хотите анимированный фон для нужной кнопки, почему бы не использовать background-image и анимировать background-position с помощью jQuery?

Answer 3

Самый простой способ - это, вероятно, расположить изображения абсолютно, а затем манипулировать top, что-то вроде этого:

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

<script>

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

</script>

Прочитайте документы jQuery animate здесь: http://www.google.dk/search?sourceid=chrome&ie=UTF-8&q=jquery+animate

Не должно быть так сложно разобраться:)

Answer 4

как то так.

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

но было бы лучше, если бы вы дали нам некоторый код вашей html-структуры и что-то о вашей идее.