Javascript dynamically generates CSS animations

I need assistance creating a div with a CSS3 animated timer inside it when a button is clicked. Here is the code I have been working on: http://jsfiddle.net/arcco96/y5nov6rz/1/. Unfortunately, the div is not being created as expected. I believe the code should work fine, but I am unsure if it is possible to create a div with a CSS animation after the page has loaded.

The foundation of my fiddle is based on this example: http://jsfiddle.net/zbGCq/118/.

My current approach to creating the div goes as follows:

$("#btn1").click(function(){
    jQuery('<div/>', {
        class: 'timer',
    }).appendTo('#center');
    jQuery('<div/>', {
        class: 'mask',
    }).appendTo('#center');
});

Any insights or suggestions would be greatly appreciated.

Thank you,

P.S. On a slightly different topic, I would like to know if it is possible to overlay content on the #timer element or if that will pose a challenge?

jqueryhtmlcssanimation

Answer №1

You attempted to use jQuery objects before they were even created.

Although the CSS is still not working correctly in my Firefox browser, the JavaScript functionality is operational.

In Chromium, there is an animated effect occurring, but I am unsure if that is the desired outcome.

Check out this link for more details.

var cv = $('.container').width();
$('.head').css({
    'height': (cv / 3) + 'px'
});

$("#btn1").click(function () {
    jQuery('<div/>', {
        class: 'timer',
    }).appendTo('#center');

    var cw = $('.timer').width();
    $('.timer').css({
        'height': cw + 'px'
    });

    jQuery('<div/>', {
        class: 'mask',
    }).appendTo('#center');
});

Answer №2

To achieve this effect, I recommend using JavaScript to animate the path element within an SVG.

You have the flexibility to adjust the size of the timer by modifying the value assigned to the width variable. Additionally, you can control the speed of the animation by changing the value of the t variable.

Check out a live demo on CodePen

var timer = document.getElementById('timer');
var svg = document.getElementById('svg');
var width = 150;
svg.setAttribute('width', width);
svg.setAttribute('height', width);
var t = 5;
var theta = 0;
var radius = svg.getAttribute('width') / 2;
timer.setAttribute('transform', 'translate(' + radius + ',' + radius + ')');

(function animate() {
  theta += 0.5;
  theta %= 360;
  var x = Math.sin(theta * Math.PI / 180) * radius;
  var y = Math.cos(theta * Math.PI / 180) * -radius;
  var d = 'M0,0 v' + -radius + 'A' + radius + ',' + radius + ' 1 ' + ((theta > 180) ? 1 : 0) + ',1 ' + x + ',' + y + 'z';
  timer.setAttribute('d', d);
  setTimeout(animate, t)
})();
body {
  background: #333333;
  text-align: center;
}
<svg id="svg">
  <path id="timer" fill="lightseagreen" />
</svg>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for incorporating animation when opening a Jquery SimpleModal

The SimpleModal website features an animation-enabled example with the following sequence: 1. Display modal only 2. Fade in the overlay The code snippet for this animation is as follows: $("#the-div").modal({ onOpen: function (dialog) { dialog.overl ...

javascriptjquerymodal-dialogsimplemodal

Having trouble with PHP when using JQuery Ajax to post data

Currently, I am working with a list of records retrieved from a MySQL table. Each record has been assigned an onclick function to pass data for further database queries without having to refresh the page. <a href='javascript:void(0)' onclick= ...

phpjqueryajaxpost

Display information in the DIV element after using the .focus() method in JQuery

Imagine I have a form structured like this: <select id="model"/> <input type="text" id="serial"/> <label>Packing <div id="packing" name="packing"></div></label> <br/> <input id="pack1" type="radio" class="pack" ...

jqueryajaxformssetfocus

Widget for tracking attendance - incorporating HTML, CSS, and Bootstrap styling

I recently created a widget named attendance to track monthly data, from January to December. I spent time designing and coding it using HTML, CSS, and Bootstrap, as shown in the image below https://i.sstatic.net/FtFJv.png However, I am now faced with t ...

jqueryhtmltwitter-bootstrapcss

The starting point of an html text is signified by < and it concludes with >, showcasing

My HTML <div> <Sample text> </div> <div> <SampleText> </div> In both examples above, blank content is appearing after the DOM is created. I anticipate displaying the text as it appears. Your assistance with this matt ...

html

Instead of accessing the HTML page directly, you can view the source page by using the F12

I need to extract both data and IPs from VirusTotal.com using selenium and Beautiful Soup in Python. When I make a get request, I only receive the view-source HTML instead of the complete data-rich HTML shown in Inspect mode (F12). Does anyone have any su ...

pythonhtmlseleniumbeautifulsoup

Refreshing Div Element with PHP AJAX POST请求

It's me again. I'm feeling really frustrated with this code, it's starting to get on my nerves. I don't mean to keep bothering you, but I finally figured out where the issue was in the code and now I just need a little help with the fin ...

phpjqueryhtmlajax

Tips for correctly positioning CSS elements:

I am currently working on a slider using noUi Slider and aiming for an elegant solution. To accommodate the large size of the handle, I expanded the base UI with extra values which are not allowed, causing the handle to jump back to the permitted values. T ...

jqueryhtmlcsscss-positionz-index

What is the best way to create more room for my button arrangement?

--How can I adjust the spacing of the buttons?--The animations are working, but I need to create some padding between them-- I want all buttons to stay on the same line but with a little more space between each one--I'm still relatively new to this, s ...

htmlcss

Tips for creating a custom Angular Material modal window that is fully responsive to its parent modal window

Hey there! I've put together a custom modal window in Angular Material by combining the custom modal window example with the Angular Material slider demo. Everything is working well except for the fact that the sliders inside the modal window are not ...

javascriptcssangularjsangular-material

Tips on securing ajax post values against browser inspection techniques

function updateR() { $.ajax({ type: "POST", url: "update.php", data: { surprize: '12345678910', dpoint: point, dlevel: level } }).done(function( msg ) { // alert( "Data Saved: " + msg ); }); ...

phpjqueryajaxpostinspect

Navigating the absence of Prismic's ability to use the <blockquote> element in their rich text editor

My experience with Prismic as a headless CMS has been mostly positive, but I recently encountered an issue that surprised me - the lack of support for a simple blockquote. It's baffling to me that such a basic HTML element is not natively supported by ...

htmlcssvue.jsprismic.io

What could be causing AngularJS to truncate my URL in the search bar?

Currently, I am in the process of setting up a state provider for a CRUD website. One issue I encountered is that when I navigate to www.mysite.com/posts/mypost, the URL gets shortened to www.mysite.com/mypost and does not trigger the controller as intend ...

javascripthtmlangularjsangular-ui-router

Issues with Iframe { height:70%;} in Internet Explorer 8 and Firefox causing display problems

In my website's design, I have a div structure with an iframe to load pages. The header remains at the top seamlessly The footer stays at the bottom perfectly The content is positioned in the middle flawlessly However, the iframe does not stret ...

htmlasp.netcssiframe

Incorporating an additional row into a material table

Currently, I have implemented a mat-table with various features including drag and drop functionality and dynamic columns. However, I am facing an issue while trying to add row filters under the table header. I attempted to simply insert a <mat-row> ...

javascripthtmlangularangular-material

Employing Bootstrap, incorporate a vertical divider in the center to split three icons on the left and three icons on the right, all while ensuring the design remains responsive

I have been struggling with a layout issue for the past couple of days and I am in need of assistance from someone who can help me. Unfortunately, I am unable to upload an image here as I am new and do not yet have enough reputation points. The Layout Str ...

htmlcsstwitter-bootstrap

How can I trigger an event to append a UL element using

Can anyone suggest a more elegant solution for handling an append/remove event from an element without having to manually trigger an event or resorting to other methods? It would be great if there was a way to do something like this: $('#id').o ...

javascriptjqueryeventshtml-listshandler

Choosing a specific element within another element of the same type using JQuery

I've created a complex nested HTML structure shown below: <ul class="root"> <li>Foo 1 <label class="bar-class">bar</label> <ul> <li>Foo 2 <label class="bar-class">bar</label> ...

javascriptjqueryhtml

none of the statements within the JavaScript function are being executed

Here is the code for a function called EVOLVE1: function EVOLVE1() { if(ATP >= evolveCost) { display('Your cell now has the ability to divide.'); display('Each new cell provides more ATP per respiration.'); ATP = ATP ...

javascripthtmlcssfunction

The functionality of Intersection Observer causes text to appear over the header

Hey everyone, I've been working on a scrolling animation to make text appear when it's at least 50% visible. So far, I have an animated header with an Onscroll Event and Intersection Observer for the text. It's all working well, except for ...

javascripthtmlcssoverlappingintersection-observer