Here is my situation. I'm trying to do several animations on a single element at once; however, with the UI thread 'feature' and JQuery's animation queue it's becoming a hassle.
I'm designing a re-usable control library for a site and one of the things I wanted to do was to have a multi-class attribute system to initiate different animations upon ready().
For instance:
<div class="fadein loadingbar"></div>
with the CSS for an image background for .loadingbar, and then JQuery to animate the loading-bar's background indefinitely:
$(".loadingbar").each(function(){
$(this).css({backgroundPosition:"0px 0px"});
$(this).animate({backgroundPosition:"(-65px 0px)"}, (($(this).height() / 35) * 2000) + 600, "linear", function(){_n3_animLoadBars(this)});
});
as well as the fadeIn() animation for the .fadein class:
$(".fadein").each(function(){
$(this).css({opacity:0,visibility:"visible"})
.animate({opacity:1}, {duration:1000});
});
However; the only way to get them to animate asynchronously is to do {queue:false} for the .animate() function, which works fine until I want to delay the fade-in animation:
$(".fadein").each(function(){
$(this).css({opacity:0,visibility:"visible"})
.delay(800)
.animate({opacity:1}, {duration:1000,queue:false});
});
which completely skips the .delay() call since it's not queued (therefore not placing the animation cue right after the delay on the fx stack).
The only fix is to wrap the div with another div:
<div class="fadein"><div class="loadingbar"></div></div>
and to take the {queue:false} out, of course.
While this works, the javascript was supposedly going to be advanced enough so the markup didn't have to be that messy (usually a simple div wrap like that is fine with me, but I'm designing this for my own personal amusement and I would like to keep it down to a single div if at all possible).
Any quick fix with JQuery that I am missing, or is there a way to do this through writing a plugin?
Any insight would be helpful!
Found the solution - it was easier than I thought.
Instead of specifying {queue:false} on the fade-ins, I specified it on the background animations, leaving the fade-ins queued.
Related
I'd like to know what the jquery show() function does, but cannot find it in their source. Can you please explain where it is, and what I need to understand better about javascript to be able to, or to have found it?
I've looked in their source, which is here:
https://code.jquery.com/jquery-3.4.1.js
And searching "show(" doesn't find it. Neither does searching on "function show"
I want to do the straight equivalent in direct javascript css, that's my goal.
As far as I can tell, I'm encountering the problem described with Chrome described in the the first answer here:
Proper way to reset a GIF animation with display:none on Chrome
I put in a bunch of css changes, and the css transitionrun and transitionstart events don't fire as expected, perhaps queued up as this answer says. So, I'm trying to find out what show() does, so I can ideally just do it directly with javascript/css. (and just to be clear, I'm not dealing with GIF. I'm applying a bunch of css changes, then setting style.transition, and am having plenty of timing problems, the events not firing as expected. So, what does jquery show do (ideally cause the Chrome queue to finish and fire the events right).
To your question where can I find this?, I found this:
jQuery.fn.extend( {
show: function() {
return showHide( this, true );
},
The showHide method will remove display styling from an element (and hide will set display: none
You cannot set a CSS transition for the display property. There are other options, like transitioning from opacity: 0 to opacity: 1. You can add another class with JavaScript to the element.
.element { opacity: 0; transition: opacity 0.4s; }
.element--show { opacity: 1; }
Since you're using jQuery, the easiest way is probably using jQuery's .fadeIn method for a fade animation. However, this is not the best solution when it comes to performance.
I really like the way the DIVs fold/unfold from the top to the bottom then left to right when users click on the menu items (about, services, my tools, etc) on this website. Seems that it has been developed by a very talented person.
Any idea how to achieve something like that? I was expecting this to be done via complex CSS animation, but looking at the CSS sheet that doesn't seem to be the case.
Many thank
On that site it is achieved with the use of jQuery UI - more specifically with the Fold Effect.
I think using jQuery UI for this task alone would be an overkill, in fact you don't even need jQuery here, but I think you want to stick to it, since it's relatively easy both to read and to write code:
$("a").click(function() {
$("#fold")
.animate({ width: "500px" }, 1000 )
.animate({ height: "500px" }, 1000 )
});
See:
http://jsfiddle.net/bartkarp/u3qtt6fo/
http://api.jquery.com/animate/
If you don't want to use jQuery UI, I guess you could do it by animating the css...:-??
First state is height: 0; and width :30px; ...then using the animate on click event you could give the height a value and animation time, the width a delay equal o bigger than the height animation time and then it's value...that should do the trick but it's more stiff than actually using the UI
Hi I am struggling with a jquery problem what i need is, sliding lines inside of borders of an image. There are four lines and I want them to slide inside the border when the page is loaded. The first line should slide down to up; the second one left-to-right; the third one top-to-down and the fourth from right to left.
I hope that my question is clear.
(the mentioned lines are red)
You don't need JS to do this. Here is a pure CSS way of performing this animation onload, by using keyframes. Unless you want to support older browsers, this method should work.
I'll show the first two, you can do the other two
function slideLine1(){ $('#line1').animate({width: '100%'}, 1000, slideLine2); }
function slideLine2(){ $('#line2').animate({width: '100%'}, 1000, slideLine3); }
This will work. However, you can do this with 1 function, calling itself, and an i variable. That will be up to you.
There are other methods to do, this is a very basic example. A tip: Look into jQuery chaining.
Here is a demo which uses only css.
It basically uses #keyframes to solve the problem.
I'm working on revamping my website, and the new one can be found on http://beta.namanyayg.com/
There are mainly two things related to scroll on the site:
To check on which 'page' the user is on, by calculating the top offset and scroll position, then adding a class to the page.
To smooth scroll on menu click.
I've written code for both, but there is a lot of lag.
The first one almost always results in lagging. The second one, as a result, lags too. I have included a boolean to check if it's smooth scrolling and disabled the normal scroll events then, but there's not much change.
Do you have any advice on how to improve performance so there is no (or at least, less) lag? Thank you in advance! :)
...Or is it not related to JS at all? I've optimized everything else...
EDIT: Unminified JS at http://beta.namanyayg.com/js/main.js
If you are using underscore, it has an awesome _.debounce function that is excellent for this sort of thing.
To check how much the user has scrolled from the top of the page (i.e. on which 'page' he is at the moment) can be achieved with:
$(window).scroll(function () {
var scrollAmount = $(window).scrollTop(); // in pixels
if(scrollAmount > SOME_AMOUNT)
{
// add required css class
}
});
To scroll smoothly, to some id for example, you could use:
$("html, body").animate({ scrollTop: $("#someID").scrollTop() }, 1000);
These are both jQuery solutions, so you should have jquery library included. There is also a nice jQuery plugin called waypoints that performs these calculations. It might prove useful to you and it has some other nice features and examples.
I have the same problem. I have a scrollable div with thousands of smaller divs. Every time I call scrollTop to get the scroll-position or set it, it sometimes waits at least 1 second.
I read these slides: http://www.slideshare.net/nzakas/high-performance-javascript-2011 (especially slides 138-139) and now I realize that every call to scrollTop, even as a getter, makes javascript relayout the page. This is most likely the cause of delay, but unfortunately I have not found a solution yet, as in a way to call scrollTop without causing relayouts.
Note: I've only been testing on Chrome.
Also read 'Browsers are smart' section of this article: http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
I've found an easy solution to the lag with getting scrollTop, just call it inside a scroll-handler and save the result in a variable.
for example in jQuery:
var scrollPos = 0,
element = $('.class');
element.scroll(function(){
scrollPos = element.scrollTop();
});
For the second problem, setting the scrollTop, I reduced the amount of DOM elements by only showing the visible elements. In your case make sure only the visible page(s) are added to the DOM. when scrolling to the next page, in the scroll handler remove the top one (use jQuery .detach) and append the next one to the DOM.
I'm working on a project with several animations; fades, slides, and regular pixelanimation.
My client hates that jQuery "remembers" how many times you have activated a animation, and therefore continues animating (cueing) when you leave (unHover ..if that's even a word :-P).
I've found a solution, that only works on the pixelanimations, and not on the slideDowns, and fades. It is to set stop() before animation. "stop().animation".
Is there a solution that works everywhere?
Thank you!
.stop() will work, just pass it arguments for those other cases (or in all cases), like this:
.stop(true, true).animate(/* options */);
The second true tells it to jump to the end of the animation, which fixes issues like a slide remembering a half-way-down height and such.