Use jQuery to select, then use YUI to animate? Good idea? - javascript

jQuery's animation engine isn't working well for me. It doesn't have easing and color animation built-in, and the plugins I am using for them don't work properly together consistently.
I've had good experience with YUI's animation engine in the past. Is it possible to use jQuery to select items, and then use YUI to animate them? Here's my current jQuery-animated code to animate a div when you click it:
$("div.article").mousedown(function() {
$(this).children(".box").animate({height:'+=100px', paddingTop: '24px'},300);
$(this).children(".box").children(".subBoxA").show().animate({opacity: "1"}, 500);
});
How would I go about converting the animations in this function to YUI3?
(Is this even a good idea? Should I just convert everything to YUI3, selectors and all? Also, if this comes across as a dumb question, forgive me, i'm a noob)

Part of the benefit of these javascript libraries is that you get a ton of functionality in a smaller amount of code. By including both JQuery and YUI, you are quickly increasing the size of your pages.
If the only thing you are using jquery for is to select elements in the DOM, then definitely convert to YUI as it has many of the same selection methods. If you are using several pieces of both jquery and YUI, then mixing them may be something you have to live with for now.

If you are animating a single element, you can do something like this:
YUI.use("anim", function (Y) {
$("div.article").mousedown(function () {
var el = $(this).children(".box")[0],
anim;
anim = new Y.Anim({
node: el,
/* animation configuration */
});
anim.run();
});
});
AFAIK, YUI does not support animating multiple elements out of the box, though you could implement it using the tween events.
I suspect you are better off using jQuery UI, however. It provides color animation and advanced easing.

Related

CSS/JQuery/Angular transition on form submit

I ran into this beautiful UI mockup on Behance and am very curious about the best way to implement this.
https://www.behance.net/gallery/25264659/Google-transitions
Essentially, I would like my search bar and logo to animate up to the top exactly like this after the form (aka the text input) has been submitted.
My app is an Angular app, so would it be more practical to create an Angular directive? Or implement this with pure CSS or JQuery (independent from Angular)?
Your animation will be independent of AngularJS. In regards to performance of the animation JQuery is by far the absolute slowest. The standard would be to use CSS transitions / animations. If you are not comfortable with CSS then user something like velocity.js. It has a syntax similar to JQuery but used window.requestAnimationFrame making it potentially even faster then CSS.
All Angular would be used for would be used for would be to call the animation or add / remove a class to cause the CSS transition to animation when the search is underway.
As for the animation itself I unfortunately cannot help much with, those things tend to take a lot of effort to get looking good.

Simple animation library in javascript

I'm trying to create animations on a canvas.
They are similar to animating top on an element.
I want the simplest possible library for animations.
Ideally I would like to send in duration, easing and a function which gets called with a percent.
I've tried Animator.js which does what I want but it is unmaintained and is quite laggy.
Most libraries I've seen are over 10k minified and do pretty much everything except what I want.
Are there any good, small and efficient libraries for this out there or am I going to have to write one myself?
http://coderepos.org/share/wiki/JSTweener
This is a very light one I use. The only thing I would like added to it is removeTweens(...).

Using jQuery for Effects

Ok - have been tasked with possibly an impossible (or at least a potentially nightmarish) scenario.
Need to come as close as possible to reproducing PowerPoint-like effects via HTML/JavaScript (the spec is large and ugly, so I will spare you the details).
Ultimately, I am looking for a solid launching point. I have used both Prototype/Scriptaculous as well as jQuery in many projects, and based on what I am seeing, it appears jQuery has the more plug-in available, so am leaning towards using jQuery.
Can anyone point me to some plug-ins, articles, or anything else that would help me in accelerating the research on this so I can define to my client what can and cannot be done.
Any other suggestions from you jQuery gurus are welcome of course.
Thanks -
What do you mean with "PowerPoint-like" effects. If you mean animations between slides you should look into
the Effects available with the standard jQuery download (fadeIn, fadeOut, slideDown, slideUp, ...)
the jQuery Easing plugin
the jQuery Cycle plugins effects browser
I would certainly look at jQuery UI as well, which adds a number of effects. See here for a current list. Click on the link for each to see several demos, there are quite a few options for some that are powerpoint-ish.
For example, try the various options in the dropdown here.
The jQuery documentation is very good:
jQuery animate docs
However, if you are trying to achieve very complex effects you will almost certainly benefit from using a different framework. jQuery is a fantastic tool - particularly with the DOM, but animation isn't its strongpoint.
MooTools has a particularly good animation library (MooTools began life as a JavaScript animation framework) with a number of core modules that give you flexible tools to create complex animation chains yourself as well as a number of official and community-provided plugins. My recommendation would be to at least have a look at that first. You can certainly achieve this in jQuery but you will be making it more difficult for yourself!
MooTools homepage
Mootools Core Documentation
My $0.02: If you're doing complex effects, you need the library that runs the fastest, not the library that is the easiest to work with.

javascript fade animations

i want a certain DOM element to fade into view in my script. i tried using the timeout feature but couldnt get it to work.
hover.addEventListener('mouseover',function () {Core.addClass(cpanel,"on");},false);
please tell me how to implement a fade-in effect for this. please dont recommend jquery or any other framework.
Can you provide markup to go with your JS, so we know what we're looking at?
Also, if you don't want to use jQuery or another framework, you can still look at their implementations to see how to make this kind of thing work. Fading is a notoriously difficult thing to implement cross-browser because of IE6's spotty transparency support.
So many excellent Javascript developers have written animation functions, you'd really do yourself a favor (and your viewers) to use theirs. People are suggesting jQuery, which is great. MooTools is another great alternative.
However, if you want a nudge in a direction of how to write animation in Javascript, I cooked something up here real fast. Note that there's been no cross-browser testing, I'm sure it doesn't work in IE6 (IE7 even?). Nor would I want to, I appreciate the code others have already tested for me.
This is just an idea of how you could do so with native Javascript:
function fadeIn(el, speed) {
el.style.opacity = 0;
var interval = setInterval(function(){
el.style.opacity = parseFloat(el.style.opacity) + 0.1;
if(el.style.opacity == 1.0) {
clearInterval(interval);
}
},speed / 10);
}

Can I accept an image that is dragging in HTML?

In many browsers today you can click and drag images. Can I leverage this in any way? Could I receive an event when an image is dragged and dropped on top of another image in the same browser window?
You could use the JQuery Draggable plugin.
I guess you could do it easily with http://script.aculo.us/
I know it works for block elements, not sure about inline though
You could have a look at this DHTML library = DEMO & API
I think this can be done by any Javascript framework (JQuery, Scriptaculous, MooTools, Dojo) as vrinek says. You could also cook up your own Javascript solution, but stable dragging and dropping routines are at the core of most frameworks.
I think whether an element is a block or inline doesn't really matter as you can set the properties for this as well in CSS.
A number of browsers now support the Drag and Drop API, though not Internet Explorer, which (as usual) has its own way of doing things. If you're looking for a cross-browser solution that works today, one of the libraries is still your best bet.

Categories