I am looking to initiate a jQuery animation once another one has completed.
Initially, there is a slide down effect towards the second navigation bar:
$(".navigation-bar1").click(function() {
$('html,body').animate({
scrollTop: $(".navigation-bar2").offset().top
}, 'slow');
});
The second animation toggles a CSS class that opens a navigation bar:
$(".trigger-navbar").click(function() {
$("body").toggleClass("navbar-down");
});
According to information found on the official jQuery documentation, the animate() method has the following signature:
.animate( properties [, duration ] [, easing ] [, complete ] )
The part of interest is [, complete] which allows you to define a function that will be executed once the animation is completed.
In your specific scenario, you can implement the following code snippet:
$(".navigation-bar1").click(function() {
$('html,body').animate({
scrollTop: $(".navigation-bar2").offset().top
},
'slow',
function(){
// This code block will run after the animation finishes
$("body").toggleClass("navbar-down");
});
});
One way to achieve this effect is by using the queue() function in jQuery, assuming that 'trigger-navbar' and 'navigation-bar1' refer to the same element:
$(".navigation-bar1").click(function() {
$('html,body').animate({
scrollTop: $(".navigation-bar2").offset().top},'slow')
.queue(function() {
$("body").toggleClass("navbar-down");
$(this).dequeue();
});
});
One way to initiate a new animation is by using the complete callback function
.animate( properties [, duration ] [, easing ] [, complete ] ) complete
Type: Function() This function will be executed once the animation finishes.
According to the information found on jQuery's official documentation, the animate() method requires a callback function. Once the animation is finished, this function will be executed.
$('html,body').animate({
scrollTop: $(".navigation-bar2").offset().top
}, 'slow', function() {
// Perform another action upon completion of the animation
});
Do both animate on a click event?
$(".navigation-bar1").click(function() {
$('html,body').animate({
scrollTop: $(".navigation-bar2").offset().top
}, 'slow');
$(".trigger-navbar").click()
});
The animate() function in jQuery has a full callback option available:
$(".navigation-bar1").click(function() {
$('html').animate({
scrollTop: $(".navigation-bar2").offset().top
}, 'slow', function(){
$("body").toggleClass("navbar-down");
// Alternatively
$(".trigger-navbar").click();
});
});
I'm facing an issue with implementing a search feature in my project. Here is the HTML snippet: HTML: <input type="text" id="search"> <video src="smth.mp4" id="firstvid"> <video src="smth2.m ...
Displayed below are the folders on the left showcasing my Typescript file in /src (blue) compiled into Javascript in /dist (purple) using tsc. https://i.stack.imgur.com/7XNkU.png In the source file on the left, there is a reference to a .ts module file t ...
When using jQuery to change the css of an element, I've noticed that it can remove some previously specified css rules for that element. For example, .className, .className2, etc... { background-color: black; color : silver; } .className: ...
I have written this JavaScript code that is supposed to float the address div to the center when you click on the info panel using the "addressmoved" class. Challenges However, when I click on the trigger button, instead of the address div moving to the ...
There seems to be a peculiar issue with the properties of an angular component that I have set up. It appears that these properties are losing their values after the initialization process. The component is essentially a basic HTML file containing a video ...
I have successfully implemented the following code and it is functioning properly. However, I am trying to remove the black boundary color legend but am struggling to figure out how to do so. var marker = new kendo.drawing.Path({ fill: { co ...
Hey there, I'm currently using Material UI and React Select. One issue I've run into is that my dropdown options are appearing below the modal window. You can check out the code sandbox demo here https://i.sstatic.net/Av6Pe.jpg I've tried ...
I need help with my code that is supposed to add a new canvas with a circle inside every time a button is clicked. The new canvas should be displayed next to the older ones. Here is my current code: I have two default canvases on the page, and I want new ...
app.post('/result.html',function(req,res){ var num1 = req.body.Num1 ; var num2 = req.body.Num2 ; var operator = req.body.Operator ; var result =0 ; switch (operator) { case '+': result = Number(num1)+Number(num2) ; ...
I designed a form that allows users to input orders with various details into the database. One of the fields in this form is labeled Client, where users have the option to either create a new client or select an existing one. To facilitate the selection ...
Essentially, my issue stems from having a scrollable list with a set maximum height of '100vh'. I also have a detail card beside the list that contains accordion components. When one of these accordions is expanded, it increases the height of the ...
Is it possible to restrict certain options in the Select component similar to how it is done in the Autocomplete component? PS: The options are present in an array. <FormControl variant="outlined"> <InputLabel>States</Inp ...
My goal is to connect a jQuery plugin to a button that is dynamically generated. I have attempted the following without success: $('.myButton').on('click', function() { $(this).file().choose(function(e, input) { // ... ...
I'm struggling to understand a simple concept here. My objective is to retrieve data from a service, which fetches data from an endpoint, and then be able to update that stored data by refreshing the endpoint. .service('myService', function ...
Hello, I am currently working on saving the response from my socket in a state via the backend. Here is a method where messages are sent to the socket: export default class Home extends Component { constructor(){ super() this.state ...
The margin table data mysteriously increased on its own after hiding / showing columns. Here is the original result before show/hide column: https://i.sstatic.net/N96HX.png After multiple show/hide actions (more than 10 times): https://i.sstatic.net/lPIG ...
I am currently iterating through zip codes and extracting data from the following website http://www.airnow.gov/index.cfm?action=school_flag_program.sfp_createwidget Below are the form and input elements: <form name="groovyform"> <input type="te ...
Can you explain the distinction between these two state updating functions and provide a recommendation on which one to use? I have tested both options in my application and they both seem to work properly. Approach 1 const [profile, setProfile] = useStat ...
I've been attempting to integrate TSX with Vuejs based on several blog posts, but I'm consistently encountering the error displayed below. I cloned a starter kit from GitHub and it worked fine, leading me to believe that there may be an issue wit ...
Many programming languages, such as PHP, provide methods to suppress error and warning messages. Is there a similar approach in JavaScript or jQuery to stop errors and warnings from appearing in the console log? ...