jQuery с использованием спрайтов - добавление более одного эффекта, может быть проблемой синтаксиса - PullRequest
Новая
       0

jQuery с использованием спрайтов - добавление более одного эффекта, может быть проблемой синтаксиса

1 голос
/ 22 августа 2011

Я изучаю jQuery, но все еще сталкиваюсь с проблемами, для которых не могу найти решение. На этот раз я использую спрайты для анимации страницы. Я могу сделать одну работу, но у меня есть две проблемы: 1) Эффект не прекращается при наведении мыши, как следует (я бы хотел, чтобы анимация была сброшена и снова стала серой) а также 2) Я не могу заставить его работать более чем на одну кнопку. Как будто первый код все еще работает и не позволяет запустить второй (мне нужно 4).

JS Fiddle с двумя кнопками (отредактировано - маршрут исправлен): http://jsfiddle.net/U9zvL/10/

Итак, в моем скрипте есть ошибка / что-то не хватает, и я не уверен, является ли это причиной того, что второй скрипт не работает.

Сценарии 

<script  type='text/javascript'>
$(document).ready(function(){
        $("#Q1animation").mouseenter(function() {
            $('#Q1animation').sprite({fps: 18, no_of_frames: 5, play_frames: 5});
            });
        $('#Q1animation').destroy();
        $("#Q1animation").mouseleave(function() {
            $('#Q1animation').spStop(true);
        });
});  
</script>

<script  type='text/javascript'>
$(document).ready(function(){
        $("#Q2animation").mouseenter(function() {
            $('#Q2animation').sprite({fps: 18, no_of_frames: 5, play_frames: 5});
            });
        $('#Q2animation').destroy();
        $("#Q2animation").mouseleave(function() {
            $('#Q2animation').spStop(true);
        });
});  
</script>

Спасибо за ЛЮБУЮ помощь, которую вы можете мне оказать!

Ответы [ 2 ]

1 голос
/ 22 августа 2011

В консоли Chrome: 

Uncaught TypeError: Cannot convert null to object    jquery.spritely-0.5.js:478

, которая представляет собой следующую строку кода: 

destroy: function() {
    var el = $(this);
    var el_id = $(this).attr('id');
    delete $._spritely.instances[el_id] // <--- HERE
    return this;
}

, поэтому похоже, что проблема заключается в том, что вы пытаетесь спрайтовать - destroy до того, как вы вызвали спрайтную инициализацию объекта, с которой библиотека плохо справляется.Попробуйте удалить вызовы .destroy() (также выполняется другая очистка кода): 

$(function() {
    $("#Q1animation, #Q2animation").mouseenter(function() {
        $(this).sprite({
            fps: 18,
            no_of_frames: 5,
            play_frames: 5
        });
    }).mouseleave(function() {
        $(this).spStop(true);
    });
});

Демонстрация: http://jsfiddle.net/mattball/9KWp5/

Редактировать - все заработало 

$(function() {
    $("#Q1animation, #Q2animation").mouseenter(function() {
        $(this).sprite({
            fps: 18,
            no_of_frames: 5,
            play_frames: 5
        });
    }).mouseleave(function() {
        $(this).spStop(true).destroy();
    });
});

Демо: http://jsfiddle.net/mattball/7z9xe/

0 голосов
/ 22 августа 2011

вы столкнетесь с этим на ладони, но css в вашем скрипте jsfiddle будет: 

http://metrosafety-dev.co.uk/images/custom/Q2sprite.png

, а не 

http://metrosafety-dev.co.uk/images/custom/custom/Q2sprite.png

Редактировать: Я получил ту же ошибку, что и @Matt Ball, с комментарием .destroy (), что эти строки позволяют работать обоим.Однако анимация запускается только один раз

...