console.log("FADIG");
console.log(modal);
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
console.log("background GONE!");
modal.animate({
"opacity": 0
}, 300, function () {
console.log("FADED OUT MODAL");
modal.css({
'opacity': 1,
'visibility': 'hidden',
'top': topMeasure
});
unlockModal();
});
That's my JavaScript code. I know that it finds the object named modal just fine. It then immediately spits out background GONE! then it takes about 10 seconds for me to see FADED OUT MODAL. Which means the animate didn't run for a good 10 seconds.
Any idea why this would be?
Super simple... I think a few animations were being queued, so I changed it to:
modal.stop().animate and all is well
Related
I want to run progressbar animation with scroll.
But it runs several times instead of once
Excuse me if it's not correct.
Please help me.
My code is:
<div class="demo-5" data-percent="80">
<script>
$(document).ready(function(){
$(document).scroll(function(){
$('.demo-5').percentcircle({
animate : true,
diameter : 100,
guage: 3,
coverBg:'#fff',
bgColor: '#efefef',
fillColor: '#8BC163',
percentSize: '48px',
percentWeight: '50px'
});
});
});
</script>
progressbar
</div>
A scroll event triggered every time a user scrolls to a different place in the element. In practice, it'll be triggered once for a smooth scrolling action, however if the scroll is 'jerky' or several small scrolls are made, this will trigger a number of times.
Check this,
I haven't tested yet, but I hope it works,
$(document).ready(function(){
$(document).scroll(function(){
$('.demo-5').fadeIn(200);
$('.demo-5').percentcircle({
animate : true,
diameter : 100,
guage: 3,
coverBg:'#fff',
bgColor: '#efefef',
fillColor: '#8BC163',
percentSize: '48px',
percentWeight: '50px'
});
setTimeout(function()
{
$('.demo-5').fadeOut(1000);
}, 500);
});
});
I have two different objects I'm using to trigger two different Waypoints events which then trigger Velocity.js (a fade in/out library).
The first even (the one on secondary) should fire eternally, up and down and every time. The second however, on .process should only fire once and then never again until the page is reloaded.
When I insert .destroy(); in the second function, it shuts off all waypoints events for the entire page. Any idea why?
Page in reference: http://www.goodcorps.com/
if (document.documentElement.clientWidth > 990) {
$('.secondary').waypoint(function(direction) {
$('.intro').toggleClass('hidden');
}, {
offset: "0%",
});
$('.home .process').waypoint(function(direction) {
$('.illus.crosses svg g').velocity("transition.fadeIn", {
stagger: 50,
duration: 100,
});
$(this).destroy(); // here's my attempted location
}, {
offset: "20%",
});
} else {
$('.home .process').waypoint(function(direction) {
$('.illus.crosses svg g').velocity("transition.fadeIn", {
stagger: 50,
duration: 100,
});
$(this).destroy(); // here's my attempted location
}, {
offset: "50%",
});
}
The page you shared doesn't appear to contain the destroy calls you reference in your code sample, but if they were included you should have seen an uncaught TypeError "undefined is not a function". The reason: You're calling $(this).destroy() instead of this.destroy(). destroy is a function on a Waypoint instance. When you try to call it on a jQuery object, which $() will return, it should have blown up on you in the console because destroy is not a jQuery method. Am I missing something here?
have a side menu on the left side of the website. I want the submenu to slide open to the right with a neat animation. I have made the script:
jQuery(document).ready(function($){
$(".main-navigation ul li").mouseenter(function() {
if ($(this).children().length > 0) {
$(this).children("ul").css ({
"display" : "block",
}).animate({
left: '250px',
opacity: 1,
}, 500)
}})
.mouseleave(function() {
setTimeout(function() {
$(this).children("ul").css({
"display" : "none",
"left" : "0px",
"opacity": 0,
})
}, 1000);
});
});
Sliding works just fine. The menu shows up nicely.
There's two problems though. One is, that the menu z-index doesn't work. The submenu's ul has a negative index set in css but when it slides it goes OVER the main ul. I want it to go UNDER the menu so it doesn't show.
Second one is, the SetTimeout function doesn't seem to work. Once the mouse leaves the area the ul just stays there forever. Without the Settimeout function it disappears just nicely (instantly though, I want it to stay there awhile).
I have made a jsfiddle example
http://jsfiddle.net/r8vx07ae/4/
Problem with z-index:
An element can not appear behind its parent. Since the submenu exists as a child element of the menu, it will not be able to appear behind the menu, z-index is really only applicable to two elements which share the same parent.
Problem with setTimeout:
The issue is most likely being caused because the this variable is out of scope by the time that the timeout occurs. This has an easy fix: create a global variable (say subMenu) and set subMenu = this before the timeout occurs and replace this with subMenu in your timeout function. You may use additional variables or a dictionary/array if you have multiple submenus to prevent the variable from being overwritten if two submenus get opened one right after the other
It is because $(this) is losing its scope on setTimeout function. To overcome this issue, you can assign your $(this) scope into a variable like $this and then use it in your setTimeout function. Here is the code changes:
.mouseleave(function() {
var $this=$(this);
setTimeout(function() {
$this.children("ul").css({
"display" : "none",
"left" : "0px",
"opacity": 0,
})
}, 1000);
});
And here is your updated fiddle:
http://jsfiddle.net/r8vx07ae/5/
The problem with the setTimeout is the scope of this
When it runs, it is the window, not the menu.
jQuery(document).ready(function($){
$(".main-navigation ul li").mouseenter(function() {
/* see if the timer has run yet, if it has not, cancel it */
var hideTimer = $(this).data("timer");
if (hideTimer) window.clearTimeout(hideTimer);
if ($(this).children().length > 0) {
$(this).children("ul").css ({
"display" : "block",
}).stop().animate({
left: '250px',
opacity: 1,
}, 500)
}})
.mouseleave(function() {
/* store the children here to get rid of the "this" scope issue */
var ul = $(this).children("ul");
/* Store a reference to the timer so we can cancel it if they mouseover again */
$(this).data("timer", setTimeout(function() {
ul.css({
"display" : "none",
"left" : "0px",
"opacity": 0,
})
}, 1000));
});
});
This will not fix the z-index issue.
I guess this is from the usage of "this" inside the callback of setTimeout sadly i do not have any computer to test out...
See section "the this problem": https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout#The_%27this%27_problem
To solve it, save a reference of this before the call of setTimeout, and use the saved reference inside your callback
Currently im trying to set a page so that on click of a button one div .animates up and another .animates down in the place the old div was which has been successful. The problem is they both do this at the same time making the animation a bit messy. What I want to do is have the animation pause for about 2 seconds just after the first div has moved up and then bring down the second div. Here is my code so far:
$(document).ready(function() {
$('.aboutcontainer,.contactcontainer,.homecontainer,.portfoliocontainer,.musiccontainer').hide();
});
$(document).ready(function() {
$(".homecontainer").show();
});
$(document).ready(function() {
$('#about').click(function go() {
$('.homecontainer,.musiccontainer, .portfoliocontainer, .contactcontainer').fadeOut({
queue: false,
duration: 'slow'
});
$('.homecontainer, .musiccontainer, .portfoliocontainer, .contactcontainer').animate({
'margin-Top': "-1000px" //moves left
});
$('.aboutcontainer ').fadeIn({
queue: false,
duration: 'slow'
});
$('.aboutcontainer').animate({
'margin-Top': "115px" //moves left
});
});
});
I have tried inserting a .delay(2000)just before the .fadeIn here:
$('.aboutcontainer ').fadeIn
and another one before the .animate here:
$('.aboutcontainer').animate
.delay does not seem to work at all (im using the lates jQuery version)
The weird thing is I have tried using a setTimeout() function like so:
setTimeout(function() {
$('.aboutcontainer ').fadeIn({
queue: false,
duration: 'slow'
});
$('.aboutcontainer').animate({
'margin-Top': '115px' //moves left
});
}, 2000);
When I do the .fadeIn pauses for the 2 seconds but the .animate does not. Can someone please let me know what im doing wrong here?
At your site .aboutcontainer has margin-top: 115px; at main.css:131.
So animation from margin-top: 115px; to margin-top: 115px; actually does nothing.
You can set, for example, margin-top: -1000px for .aboutcontainer and see the animation in action.
You are missing the time paramater for animation,
Try to add the timing for animation like below.
setTimeout(function() {
$('.aboutcontainer ').fadeIn({
queue: false,
duration: 'slow'
});
$(".aboutcontainer").animate({
marginTop: "115px",
}, 750);//Look at here..
}, 2000 );
here is the jsfiddle, check it http://jsfiddle.net/ganeshgaxy/d6g1empb/
I love the way the MacBook opens on the WhitePage (http://whitepagehq.com) homepage. I'd like to create a similar effect.
Is this created using CSS Animation, JQuery, or both? I can't seem to figure out from the Inspector. Have you seen a similar animation somewhere else?
How can I make something like this for my website?
There are two images:
<img src="lib/img/laptop-closed.png" class="lid-closed"/>
<img src="lib/img/laptop-open.png?1" class="lid-open"/>
The animation simply involves changing the laptop-open.png image's height on document ready.
This is done using jQuery (within the main page from line 126):
setTimeout(function () {
$('.lid-closed').animate({
top:10,
height:9,
width:840
}, {
easing:'linear',
duration:500
});
$('.lid-open').animate({
height:207
}, {
easing:'easeOutQuad',
duration:1000
});
}, 1000);
They are using jquery to animate the height of the open laptop image:
setTimeout(function(){
$('.lid-closed').animate({
top: 10,
height: 9,
width: 840
},
{
easing: 'linear',
duration: 500
});$('.lid-open').animate({
height: 207
},
{
easing: 'easeOutQuad',
duration: 1000
});
},
1000);
This code is done by jQuery.animate() method, you can find it in their inline js script. (View Source -> line 126). Basically they vary the height of the 'open' image at the same time as the 'closed' image. Open image expands and the closed part of the lid moves up.