Медленный переход в состояние зависания с Javascript - PullRequest
Новая
       20

Медленный переход в состояние зависания с Javascript

0 голосов
/ 14 октября 2011

Я работаю над CSS, в котором при наведении курсора мыши на изображения он становится больше. например, 

#image-div img { width:100px; height:100px;}
#image-div:hover img { width:200px; height:200px;}

Теперь я хочу, чтобы это было немного оживлено. Как будто он будет увеличивать изображение медленно, а при уменьшении - медленно. Пожалуйста, помогите.

Примечание: я не очень хорошо знаком с javascript.

Ответы [ 3 ]

2 голосов
/ 14 октября 2011

Эти анимации обычно делаются с помощью Javascript. Вместо написания Javascript вручную, вероятно, проще использовать библиотеку jQuery, которая включает метод «.animate ()». Для метода animate необходимо указать свойства css назначения в качестве параметров, например:

(Поскольку вы написали, что вы не знакомы с Javascript, я включил все, что вам нужно, чтобы включить библиотеку jQuery) 

<script src="http://www.google.com/jsapi" type="text/javascript"></script>

<script type="text/javascript">google.load("jquery", "1.6.4");</script>

<script type="text/javascript">

    $(document).ready(function(){

        $("#image-div img").live({mouseenter:myfin,
              mouseleave:myfout});

    });
    function myfin () {
    $(this).animate({height: 200, width: 200},1000); //1000 = 1 second animation
}
function myfout () {
    $(this).animate({height: '', width: ''},1000); //1000 = 1 second animation
    //setting the height and width to '' will clear the inserted style, leaving you with your original style
}
</script>

Тогда все, что вам нужно, это установить в CSS высоту и ширину 100 пикселей и удалить определение # image-div: hover.

Если вы хотите анимировать, используя определения классов в вашем CSS-файле, вы можете сделать это с помощью плагина jQuery. Смотрите следующий вопрос для справки по этому вопросу:

jQuery.animate () только с классом css, без явных стилей

2 голосов
/ 14 октября 2011

Если вам не нужна поддержка старых браузеров, вы можете использовать атрибут перехода CSS3.Он не требует никакого JavaScript и работает на Safari, Firefox и Opera.http://www.w3schools.com/css3/css3_transitions.asp

#image-div img {
    width:100px;
    height:100px;
    transition:all 1s ease-in-out
    -moz-transition:all 1s ease-in-out;
    -webkit-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out;
}
#image-div:hover img {
    width:200px;
    height:200px;
}
0 голосов
/ 14 октября 2011

Посмотрите на метод .animate () и соедините его с .hover () .Это позволит вам применить определенный переход, когда указатель мыши находится над определенным элементом, в данном случае масштабировать по желанию.

...