2012-03-05 3 views
-1

У меня здесь небольшая проблема с Google Chrome. Мой код очень хорошо работает с Safari, что заставляет меня думать, что он отлично работает с Google Chrome. Но Chrome не оживляет, как ожидалось. Что может быть неправильным?jQuery Анимация не работает на Chrome

$(function() { 
    var sourceFoto = $(".empreendimento .main-photo img").attr("src"); 
    var alturaFoto; 
    var larguraFoto; 
    var limiteX; 
    var limiteY; 
    $(document).load(sourceFoto, function() { 

     alturaFoto = $(".empreendimento .main-photo img").height(); 
     larguraFoto = $(".empreendimento .main-photo img").width(); 

     limiteY = Math.round(alturaFoto - 420); 
     limiteX = Math.round(larguraFoto - 580); 

     $(".empreendimento .main-photo img").animate({ 
      marginLeft: "-" + limiteX 
     }, 5000, 'jswing').animate({ 
      marginTop: "-" + limiteY 
     }, 5000, 'jswing').animate({ 
      marginLeft: "0px" 
     }, 5000, 'jswing').animate({ 
      marginTop: "0px" 
     }, 5000, 'jswing'); 

    }); 
});​ 

Редактировать

Я нашел ответ. Просто загрузил изображение с помощью метода onLoad и работал очень хорошо.

image = new Image(); 

image.onload = function() { 

    alturaFoto = $(".empreendimento .main-photo img").height(); 
    larguraFoto = $(".empreendimento .main-photo img").width(); 

    limiteY = Math.round(alturaFoto - 420); 
    limiteX = Math.round(larguraFoto - 580); 

    $(".empreendimento .main-photo img").animate({ 
     marginLeft: "-" + limiteX 
    }, 5000).animate({ 
     marginTop: "-" + limiteY 
    }, 5000).animate({ 
     marginLeft: "0px" 
    }, 5000).animate({ 
     marginTop: "0px" 
    }, 5000); 

} 

image.src = sourceFoto;​ 
+0

Вы проверили, что значения, которые вы передаете в метод animate, одинаковы в обоих браузерах? Если это так, возможно, это ошибка jQuery. Если нет, исправьте эту проблему. –

+1

У вас возникли ошибки в консоли? – danwellman

+0

Получаете ли вы какие-либо ошибки в консоли? (Нажмите F12 в браузере, а затем перейдите на страницу. Посмотрите в нижнем правом углу и посмотрите, есть ли ошибки. Если есть, щелкните уведомление и посмотрите, что он говорит.) – JasCav

ответ

0

Ваш преступник $(document).load(sourceFoto, function(){}). Ваш sourceFoto содержит URL-адрес, который представляет собой строку, которая затем запускает метод jQuery Ajax load(). Эта нагрузка будет либо проходить, либо сбой, и активировать обратный вызов.

В jQuery load() event предлагается использовать объект для передачи данных событий, а не строки.

Что касается тайны, почему это не было выполнено в Chrome, могу ли я рискнуть, что у вас есть этот код в элементе <head>? Если у вас это есть, значение переменной sourceFoto будет undefined. С первым аргументом load(), как undefined, будет запущено load() event, привязав обработчик события (вашу функцию анимации) к событию загрузки страницы.

Однако это не то же самое, что и ready() event, которое запускает при загрузке DOM. Я считаю, что это функция, которую вы хотите. Вместо этого используется load() event:

«... любой элемент, связанный с URL-адресом: изображения, сценарии, фреймы, фреймы и объект окна».

+0

Все слишком правильно, попробуйте взглянуть на стиль JSON, так как это действительно так, как jQuery нравится передавать данные, например: '{key: 'value'}', и, насколько сафари идет, я тоже не получаю его, но сафари и IE оба выделяются как сумасшедшие странные браузеры с нечетными идеями js interpertation. chorome и ff обычно являются лучшими для pagges с js, на мой взгляд – SpYk3HH

+0

@ SpYk3HH, ваши комментарии не имеют смысла ... Chrome и Safari являются Webkit, что означает, что они оба используют один и тот же JavaScriptCore. – Sparky

+0

@ Sparky672 Webkit - это механизм компоновки для них обоих. У Chrome и Safari разные JavaScript-движки. ;) – Raintree

Смежные вопросы