Login Register

fx

Using wipeIn/Out

Hi, I'm having a really hard time understanding Dojo and how to use the wipeIn/Out effects. I've created some jQuery code to do exactly what I want but cannot seem to figure out how to convert it to Dojo. Can anyone help me with this?

$(document).ready(function(){
        $('.main_navigation ul li:has(ul)').hoverIntent({
                over: function () { $(this).find("ul:first").slideDown('normal'); },
                out: function () { $(this).find("ul:first").slideUp('normal'); },
                timeout: 500
        });
});

fx.wipeIn, fx.wipeOut

Due to the mainframe that I'm currently working with, it seems to be a problem with me inserting extra functions to get the wipeIn/wipeOut to be able to slide horizontally. The two files that I was changing was the dojo/fx.js and dojo/NodeList-fx.js. However I know there is a much better way to accomplish this task, by possibly adding a switch as a parameter to tell whether or not you want a vertical slide much like what dojo provides for you or a horizontal slide.

in the wipeIn function there is a part of code that is
var height = dojo.style(node, "height");

(Barely) Working Text Effects!

After trying unsuccesssfully for about a week to split a block of text into spans of words or letters, I finally followed the KISS rule and made something work. Originally, I was trying to recurse through every non-textNode and split the textNodes inside their parentNodes so any HTML inside the supplied node would remain intact. However, some HTML "features" (and lack of sleep) prevented all my attempts from providing me with what I thought would be a simple, robust, and efficient bit of magic.

fadeOut doesn't work

I can't use dojo fadeOut.
Please, see my html:

Hide me!

Please, see my js:

function fadeOutDiv(){
        alert("fadeOutDiv()");
                //dojo.fadeOut({ //no func
                //dojo.style.getOpacity problem no function
        var div = dojo.byId("fadeOutDivId");
        div.style.opacity = 1;
        alert("Opacity 1 = " + div.style.opacity);
        alert("id 1 = " + div.id);
        dojo.lfx.html.fadeOut({
                node: dojo.byId("fadeOutDivId").domNode,
                duration: 2000
                }).play();
}

Two New Effects, New Direction

Since this is supposed to be the "Midterm Evaluation Period" and "Coding Phase II" starts on Tuesday, I've been taking it easy this past week. However, I haven't completely stopped working on my project; there are two new effects. Nothing to spectacular, just a wipe version of the previous "shear" effect ("pinwheel" was the best name I could think of; suggestions are welcome), and an effect where pieces simply fade out. The demo page is here.

Shear Effect, Verbose Demo Page

Since my last update, I've made the demo page more verbose and created a "shear" effect that, once again, splits the element into rows and/or columns and slides them in alternating directions, with an optional progressive or random delay between each piece's animation.

Disintegrate Effect

With the successful completion of the explode effect, I decided to build on the code used to split the node into pieces. I split the code in half and thus created a new generic function, dojox.fx._split that returns an animation object that splits the node into args.rows and args.columns and applies args.pieceAnimation() to each piece. This function takes the piece, its x and y location in the grid of pieces, and the dojo.coords of the original node as arguments and returns either an animation object or an array of animation objects to be combined.

Explode Effect

I created a nice animation effect that splits the element into an arbitrary number of rows and columns, then sends them flying away from the element's center. The user can specify whether or not the pieces fade out as they move, and whether or not the distance and duration of each piece's animation should be randomized.

The effect is accomplished by cloning the node once for each piece and combining each piece's animation together. The original node's opacity is set to zero onPlay.

The dojo.moj.oe

They say imitation is the most sincere form of flattery, and I agree. I had the pleasure of running an experiment writing an identical widget in Dojo, jQuery, and Prototype, and naturally ended up at the script.aculo.us website. Its one of those elegantly simple involving websites, where even if

Chain Animation onEnd Event Firing

Hi All,

I have noticed the following behaviour when using the dojo.fx.chain animation and connecting to its onEnd event.

What I would like to do is have a couple of animations run one after the other, then when all have finished, call another function, below is my contrived example;

var anim1 = dojo.fx.wipeOut({node:'ele'});
var anim2 = dojo.fx.wipeIn({node:'ele'});
var c = dojo.fx.chain([anim1,anim2]);

dojo.connect(c,"onEnd",someFunc);

c.play();
Syndicate content