Попытка добавить функцию щелчка к изображению, заставляет изображение исчезать

Я пытаюсь попрактиковаться в событиях jQuery и хочу просмотреть несколько картинок, используя событие по щелчку, просто для работы с несколькими эффектами.

В настоящее время у меня есть изображение, которое увеличивается при наведении на него, а затем сжимается при наведении.
Все работает, пока я не раскомментирую закомментированный код в jQuery. Изображение просто исчезает. Я перепробовал почти все, что мог придумать, и я не уверен, где я ошибся.
Я довольно новичок в jQuery, и я учу себя с помощью учебников и исходного кода из других проектов, поэтому я не сомневаюсь, что это было просто глупо с моей стороны.
Буду признателен, если кто-нибудь поможет мне решить мою проблему. Пока что исправление ошибок кажется моей самой слабой частью кодирования.

    $(document).ready(function() {
        var preloadImgs = ['imgs/ptilota.jpg',
                           'imgs/cell_division.jpg',
                           'imgs/lynx_spiders.jpg'];

        var imgs = [];
        for (var i=0; i<preloadImgs.length; i++) {
            imgs[i] = new Image();
            imgs[i].src = preloadImgs[i];
        }

        var photo = $('#photo');
        var imgVal = 0;

        photo.attr('src',preloadImgs[imgVal]);

        photo.hover(
            function() {
                $(this).stop().animate(
                    {
                        width: '1080px',
                        height: '682px'
                    }, 500
                );
            },

            function() {
                $(this).stop().animate(
                    {
                        width: '540px',
                        height: '341px'
                    }, 500
                );
            }
        );

        /* photo.click(

            function() {
                imgVal = imgVal + 1;

                 if (imgVal >= preloadImgs.length) {
                    imgVal = 0;
                } 

                photo.attr('src',preloadImgs[imgVal]);
            }
        ); */

    });

Это HTML:

<body>

<img src="" id="photo" />

</body>
Источник

0 ответов

Другие вопросы по тегам