Пульсирующая точка JQueryUI, ожидание не работает

Я пытаюсь создать простую кликабельную пульсирующую точку. При щелчке он переместит пользователя на другой сайт. Проблема в том, что я не могу сделать анимационную работу, я пробовал много примеров, анимировать просто не работает. Точка должна быть полностью отзывчивой. Я уже проверял, работают ли JQuery и JQueryUI.Пульсирующая точка JQueryUI, ожидание не работает

Код:

HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title></title> 
    <link rel="stylesheet" href="css/main.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
    <link rel="stylesheet" href="js/jquery-ui-1.11.4.custom/jquery-ui.min.css"> 
    <script src="js/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script> 
    <script src="js/script.js"></script> 
    </head> 
    <body> 
    <div class="wrapper">   
      <img id="dot" class="wrapper__dot" src="images/dot.svg" alt="Click to enter site"> 
    </div> 
    </body> 
</html>

CSS:

html { 
    width:100%; 
    height:100%; 
} 
body { 
    width:100%; 
    height:100%; 
    margin:0px; 
    position:relative; 
} 

.wrapper { 
    position: absolute; 
    max-width: 45%; 
    max-height:45%; 
    top:50%; 
    left:50%; 
    overflow:visible; 
} 

#dot { 
    position:relative; 
    max-width:100%; 
    max-height:100%; 
    margin-top:-50%; 
    margin-left:-50%; 
}

JAVASCRIPT:

function pulse() { 
    $('#dot').animate({ 
     width: 200, height: 200, 
     opacity: 0.5 
    }, 700, function() { 
     $('#dot').animate({ 
      width: 300, height: 300, 
      opacity: 1 
     }, 700, function() { 
      pulse(); 
     }); 
    }); 
}; 

pulse(); 

if (typeof jQuery.ui !== 'undefined') { 
    console.log('WORKING'); 
};

источник

2015-09-13 Soothsayer92

Просто вставьте свой код здесь, и он красиво анимирует: https://jsfiddle.net/8cehs3dc/ – kadrian

Так что же вы делаете, чего вы ожидаете и что происходит? – kadrian

Я пытаюсь заставить эту функцию импульса работать. Я ожидаю, что он будет оживлять, как вы только что связались в JSFiddle, но на моем локальном хосте он просто показывает изображение SVG без анимации.Он должен работать, как вы заметили, но моя проблема в том, что это не так, мой вопрос - почему? – Soothsayer92

Я положил его в комментарии, но Я полагаю, что он заслуживает ответа.

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

Вместо этого рассмотрите возможность использования анимации CSS3. Они очень просты в настройке, и они - basically universally supported (немногим из менее используемых браузеров по-прежнему нужно играть в догонялки).

В этом случае, ваш CSS прост:

@keyframes pulse { 
    from { 
     width: 300px; 
     height: 300px; 
     opacity: 1; 
    } 
    to { 
     width: 200px; 
     height: 200px; 
     opacity: 0.5; 
    } 
}

Теперь, когда вы определили анимацию, применить его к элементу:

#box { 
    animation: pulse 700ms ease-in-out infinite alternate; 
}

Для того, эти свойства являются:

Анимационное имя: pulse
Ani Продолжительность мация: 700ms
Анимация интерполяции: ease-in-out - обеспечивает хороший бит гладкости
Анимация повтора: infinite
Анимация Направление: alternate - анимация в одну сторону, а затем обратно, и так далее

браузер будет обрабатывать анимацию изначально. Это означает, что он будет использовать такие вещи, как свои собственные фреймы обновления, чтобы оживить его, включая бонусы, такие как снижение FPS (часто до нуля), когда вкладка браузера скрыта для уменьшения использования ЦП и так далее. Он будет максимально плавным - анимация JavaScript (и jQuery) может приблизиться, но никогда не будет такой же гладкой.

Что касается совместимости с браузером (особенно более старый IE) ... Действительно ли стоит использовать этот кувалду только для того, чтобы предоставить сладости для людей с устаревшей технологией?

источник

2015-09-13 15:24:50

Пульсирующая точка JQueryUI, ожидание не работает

ответ

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