Menu
I'm trying to create a simple, clickable pulsating dot. When clicked, it will move the user to another site. Problem is I can't make animation work, I've tried many examples, animate just simply doesn't work. The dot needs to be fully responsive. I already checked whether JQuery and JQueryUI are working.
Code:
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');
};
364
asked Feb 02 '26 03:02
I put it in a comment, but I figure it deserves an answer of its own.
I would question whether jQuery is the right tool for the job. A simple animation like this is a task that can be done with finesse, using jQuery sort of feels like taking a sledgehammer to push a thumbtack into a cork board.
Instead, consider using CSS3 animations. They're very simple to set up, and they are basically universally supported (a handful of lesser-used browsers still need to play catch-up).
In this case, your CSS is simple:
@keyframes pulse {
from {
width: 300px;
height: 300px;
opacity: 1;
}
to {
width: 200px;
height: 200px;
opacity: 0.5;
}
}
Now that you have defined the animation, apply it to your element:
#box {
animation: pulse 700ms ease-in-out infinite alternate;
}
In order, those properties are:
pulse700msease-in-out - provides a nice bit of smoothnessinfinitealternate - animate one way, then back, and so onThe browser will handle the animation natively. This means it will make use of things like its own refresh frames to animate it, which includes bonuses like lowering FPS (often to zero) when the browser tab is hidden to reduce CPU usage and so on. It will animate as smoothly as possible - JavaScript (and jQuery) animations may come close, but will never be quite as smooth.
Regarding browser compatibility (especially older IE)... Is it really worth using that sledgehammer just to provide a little eye candy to people with outdated technology?
121
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
