The method that I invoke:
vm.progress = function () {
$('.progress-line').width('100%').animate({ width: 0 }, 5, 'linear', 1000);
}
HTML:
<div class="progress-outer">
<div class="progress-line red"></div>
</div>
CSS:
.progress-outer {
position: relative;
height: 10px;
width: 100%;
}
.progress-line {
position: absolute;
height: 100%;
width: 0;
}
It has to animate progress bar from 100% to 0 in 5 secs. But it doesn't work. However, if I separate methods into two functions and invoke them by clicking on button (and only), it works.
You wrote wrong syntax to chaining animate function check the below code
setInterval(function () {
$(".progress-line").animate({width:
"100%"},5000).animate({width:"0%"},6000);
},5000);
Check working demo jsfiddle
For Time limit, you should use
$(".progress-line").animate({width: "100%"},5000); // time 5000 is in milliseconds
Here is the fiddle that may help you. I use background colors to show the animation
https://jsfiddle.net/simerjit/rgskzcj5/2/
Check jquery animate function details here... http://www.w3schools.com/jquery/eff_animate.asp
Related
I need some help. So there is this page that is using an iframe, for that reason the Cumulative Layout shift is pretty noticeable. So we wanted to use a preloader so that you cant see that. But the preloader code only shows the preloader for like 100ms. I wanted to change this is so I added this code in between the script tag. But now the preloader isn't going away at all. Just spinning on forever
This is the code:
jQuery(document).ready(function($) {
$(window).load(function() {
setTimeout(function() {
$('#preloader').fadeOut('slow', function() {});
}, 200); // set the time here
});
});
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('https://example.com/example.svg') 50% 50% no-repeat #aa9767;
/* Change the #fff here to your background color of choice for the preloader fullscreen section */
}
.elementor-editor-active .loader {
display: none;
}
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<div class="loader"></div>
Two things seems wrong:
Your selector seems wrong, I am assuming its meant to be .loader
The function parameter in document.ready doesn't take parameters
jQuery(document).ready(function() {
$(window).load(function() {
setTimeout(function() {
$('.loader').fadeOut('slow');
}, 200); // set the time here
});
});
I'm trying to create a fixed navbar that fades while the user is scrolling and and becomes opaque when the user isn't, but I'm not sure how to trigger the fadeTo command when they have stopped scrolling. I've played around and searched for .promise() but i can't figure out the exact usage. I'm new to JS/JQuery and I am in the midst of a school project.
JQuery:
$(window).scroll(function() {
$("#top").fadeTo(300, 0.5);
$("#top").fadeTo(300, 1);
});
#top is the navbar.
Any help is appreciated, and try to explain your answers as it helps me learn.
Thanks, Lachlan.
When mouse scrolled, create timer and if after spending time page didn't scroll, show target element.
var timer;
$(window).scroll(function(){
clearTimeout(timer);
timer = setTimeout(function(){
$("#nav").fadeIn("fast");
}, 500);
$("#nav").fadeOut("fast");
});
body {
height: 1000px;
position: relative;
}
#nav {
width: 100%;
height: 50px;
position: fixed;
top: 0px;
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav"></div>
I know to use stop() function to force queuing operations. For instance,
$(seletor).stop().fadeIn();
It prevents multiple fade effects when user triggers the mouseenter or mouseouter events.
Now I want to use stop() function with setTimeout() function or something else to prevents multiple mimic queuing effects.
Here is HTML:
<div class="container">
<div class="inner"></div>
<div class="inner2"></div>
</div>
CSS:
.container{
width: 200px;
height: 400px;
overflow: scroll;
background-color: #ccc;
position: relative;
}
.inner, .inner2{
width: 10px;
height: 500px;
background-color: red;
}
.inner{
display: none;
}
.inner2{
position: absolute;
left: 10px;
top: 0;
background-color: green;
}
JS:
$(function(){
//$(".container").stop().on("scroll", function(){
$(".container").on("scroll", function(){
$(".inner").stop().fadeIn();
setTimeout(function(){
$(".inner").stop().fadeOut();
}, 1000);
});
});
And jsfiddle ftw:)
My purpose is to trigger the setTimeout function to hide the red part when user scroll the div. But as I said before, I do not know how to combine stop() and setTimeout() function together. The red part would fadein and fadeout many times with a sequence when scroll multiple times.
Please help me, many thanks!
If you want it to keep fading in/out, you should chain the .fadeIn().fadeOut()
Something like this may be more what you're looking for...
$(function(){
var ref = null;
$(".container").on("scroll", function(){
clearTimeout(ref);
$(".inner").stop().fadeIn();
ref = setTimeout(function(){
$(".inner").stop().fadeOut();
}, 1000);
});
});
This will keep tacking on fadin/out events for animation, then when you stop scrolling for a second, the stop/fadeout takes hold.
I'd like to apply animate() and slideUp() functions to the same element. Both functions would start at the same time but would end at different times. How can I achieve that?
If I do
$(el).animate(200);
$(el).slideUp(2000);
The slideUp function waits for animate function to finish.
Thanks
To run two fx at the same time, you can pass "queue: false" as an argument like this:
HTML:
<div class="el"></div>
CSS:
.el {
height: 100px;
width: 100px;
border: 1px solid black;
position: relative;
}
Javascript:
$('.el')
.animate({'left' : '100px'}, 500)
.slideUp({duration: 1000, queue: false});
This code will slide the element right for .5 seconds, while at the same time sliding it up for 1 second. Here's a jsfiddle showing this: http://jsfiddle.net/cWLvc/
When I fadeIn a div, and this animation finished, the background suddenly disappears (this time only in Firefox).
I have a container, with two nested elements in it. The second element has a negative margin, so it appears on top of the first.
My script:
jQuery(document).ready(function($) {
$(".second_element").hide();
$(".container").each(function () {
$(this).mouseover(function () {
$(this).children(".second_element").stop(true, true);
$(this).children(".second_element").fadeIn(250, 'linear');
});
$(this).mouseout(function () {
$(this).children(".second_element").stop(true, true);
$(this).children(".second_element").fadeOut(100, 'linear');
});
});
});
CSS:
.container{
width: 221px;
height: 202px;
display: block;
float: left;
position: relative;
}
.first_element {
height: 200px;
width: 219px;
}
.second_element {
display:none;
background: #fff !important;
margin-top: -51px;
width: 219px;
height: 50px;
}
And for clarity, this a HTML example
<td class="container">
<div id="first_element">...</div>
<div id="second_element">...</div>
</td>
My second problem is, that when my mouse is hovering above the second element, the function is executed again (so the second element fades out and in). While the second element is just IN the container
This is shorter, and also, for first run, it is better that hide target by fadeOut() instead of hide()
$(".caption").fadeOut(1);
$(".container").each(function() {
$(this).mouseover(function() {
$(".caption", this).stop().fadeIn(250);
});
$(this).mouseout(function() {
$(".caption", this).stop().fadeOut(250);
});
});
Complementing the last comments; I got it. I tried it in several ways, and also with the caption to position: absolute, but instead I had to set the first element to position: absolute... now it works (however not with fading, but this is fine). I thank you very much for all your help and support!