Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Effects: Split, new effect #185

Closed
wants to merge 40 commits into from

7 participants

@jstroem

The split effects reported in feature bug http://bugs.jqueryui.com/ticket/7069 has been implemented

Jesper Linds... added some commits
@gnarf

This does have a dependency on effects.core.js doesn't it?

ofc!

@gnarf

The other UI effect that is similar also takes a "pieces" argument, and uses Math.sqrt(pieces) to determine rows/cols - I like passing rows/cols but perhaps we should also support pieces?

@gnarf

If you were to call this effect on multiple elements, this o is going to overwrite the passed in o

@gnarf

Take a look at $.effects.setMode( el, o.mode ) -- it converts "toggle" to "show" or "hide" for you.

@gnarf

There is a $.effects.createWrapper( el ) that might help reduce the need to make your own container here.

@gnarf

You might want to look at the other effects for the $.effects.save( el, props ) calls - it caches "starting" css values you can restore with restore...

Also, you are going to want to el.show() before trying to get .offset() and width, etc...

@gnarf

You can replace this whole test with:

 effect("#build", "build", { easing: 'linear' });
Jesper Linds... added some commits
Jesper Lindstroem Nielsen Made some bugs so now build works propperly.
Still considering using $.effects.createWrapper and
$.effects.save/restore.
eee07da
Jesper Lindstroem Nielsen Pinwheel is up! 7f0daf3
@gnarf

Just being super picky - But this text should probably just be "pinweel" :)

Jesper Linds... added some commits
Jesper Lindstroem Nielsen test text updated! 61c75e2
Jesper Lindstroem Nielsen testing 9dd803a
Jesper Lindstroem Nielsen Rewriting so interval can be zero 862208f
Jesper Lindstroem Nielsen Indentation magic e0b19cc
Jesper Lindstroem Nielsen Using the builtin effects.save/restore functions instead of
hardcoding
771d193
Jesper Lindstroem Nielsen blockfade added and tested! c541941
Jesper Lindstroem Nielsen Shear is on! 55da89c
Jesper Lindstroem Nielsen sexplode is inserted in one split file to unite all of em' a3992d5
@gnarf

All the others default to random: false - why default to random here?

@gnarf

Is there any reason to not put this in startSplitAnim()

@gnarf

missing spaces .css( 'visibility', 'hidden' )

@gnarf

Store [ 'visibility', 'opacity' ] as modifiedProps or something, and reuse it for the restore call later...

@gnarf

Spacing between the () and the args

@gnarf

Also Whitespace between () and args

Owner

Also - currently the effects api helpers generally take ( el, otherParams ) - might be worth passing the el from startSplitAnim in rather than redeclaring - if we ever decide to use the jQuery.sub() idea I have out there, we can move it over...

@gnarf

I'm not sure you need i and j - couldn't you do:

for ( left = 0; left < width; left += pieceWidth ) { 
   for ( top = 0; top < height; top += pieceHeight ) {
      /// work...
   }
}

Maybe even left = -Math.floor( ( pieceWidth * columns - width ) / 2); so that the pieces will be more "centered" and not lose all the excess transparent area on the right and bottom

@gnarf

you can bring the { up to this line: var opt = $.extend({

Jesper Linds... added some commits
Jesper Lindstroem Nielsen Minor fixes added de4d7cc
Jesper Lindstroem Nielsen Minor fixes 5d792f3
Jesper Lindstroem Nielsen refixing defects ee618d7
Jesper Lindstroem Nielsen Removed offset variable in $.effects.effect.build 0e61cdb
Jesper Lindstroem Nielsen Removed last TODO's de16a23
@gnarf
Owner

Awesome work here @lindstroem! So, this brings up one bit of conversation - This effect set totally includes (and supersedes) the current effects.explode - I'm thinking we might want to replace the current explode effect with yours...

tests/visual/effects.all.html
@@ -186,7 +187,42 @@
<p>hide/show (jQuery)</p>
</div>
</li>
+
+ <li>
@gnarf Owner
gnarf added a note

Since this doesn't really do anything "visual" do you think you could clear it out of this test? If its not working, the next 4 effects aren't going to work either...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
ui/jquery.effects.split.js
((4 lines not shown))
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Effects/Split (Not yet!)
+ *
+ * Depends:
+ * jquery.effects.core.js
+ *
+ */
+
+(function( $, undefined ) {
+
+ //Helper function to control the split on each animation
+ function startSplitAnim( el, o, animation, next ) {
+ //Support for pieces
@gnarf Owner
gnarf added a note

Style Guidance: empty line before comments...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
ui/jquery.effects.split.js
((182 lines not shown))
+ crop: false
+ },
+ o
+ ),
+ el = $( this );
+
+
+ //Reverse it if it is hidden and mode is toggle
+ if ( el.is( ':hidden' ) && opt.mode == 'toggle' ) {
+ opt.reverse = !opt.reverse;
+ }
+
+ //Sets mode for toggle
+ opt.mode = $.effects.setMode( el, opt.mode );
+
+ opt.show = 0 + ( opt.mode == 'show' );
@gnarf Owner
gnarf added a note

don't need the 0 +, assuming you just want opt.show = opt.mode === "show"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@gnarf
Owner

Also, I just got called out on some of my code for jquery.color -- We should always prefer using double quotes instead of single quotes, as well as === instead of == ( unless we really want the == )

ui/jquery.effects.split.js
((387 lines not shown))
+ random: false,
+ interval: false
+ },
+ o
+ ),
+ el = $( this );
+
+ //Reverse it if it is hidden and mode is toggle
+ if ( el.is( ':hidden' ) && opt.mode == 'toggle' ) {
+ opt.reverse = !opt.reverse;
+ }
+
+ //Sets mode for toggle
+ opt.mode = $.effects.setMode( el, opt.mode );
+
+ opt.show = 0 + ( opt.mode == 'show' );
@gnarf Owner
gnarf added a note

Having just seen the above 20 lines of code duplicated, might it be possible to create a function to DRY this up a little?

function splitOptions( el, defaults, o ) {
   var opt = $.extend( {}, defaults, o );
   if ( el.is( ':hidden' ) && opt.mode === "toggle") {
     opt.reverse = !opt.reverse;
   }
   opt.mode = $.effects.setMode( el, opt.mode );
   opt.show = opt.mode === "show";
   return opt;
 }

 // then in the functions:
 var el = $( this ),
     opt = splitOptions( el, {.....}, o );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@gnarf gnarf commented on the diff
ui/jquery.effects.split.js
((89 lines not shown))
+ /*
+ * Options
+ * rows
+ * columns
+ * pieces
+ */
+ $.effects.piecer = function( el, o ){
+ //Support pieces
+ if ( ( !o.rows || !o.columns ) && o.pieces ) {
+ o.rows = o.columns = Math.round( Math.sqrt( o.pieces ) );
+ } else {
+ o.rows = o.rows || 3;
+ o.columns = o.columns || 3;
+ }
+
+ var height = el.outerHeight(),
@gnarf Owner
gnarf added a note

You're going to want to make sure el is shown here before you start getting offset, etc...

In the old explode effect we use el.show().css('visibility', 'hidden'); at the beginning of the animation, and then use el.css('visibility', 'visible'); in the complete callback, and .hide() the actual element in the callback if it's not a "show" effect...

I would imagine we will want/need the same technique for this piecer....

@jstroem
jstroem added a note

I'm allready doing this in the startSplitAnim function just before we are calling the piecer function (line 37-39).

I could do it one more time in the piecer function so it is more useable for outside users? but it won't make the split functions better!

@gnarf Owner
gnarf added a note

Nope, doubtful its needed - I just totally missed it in startSplitAnim

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Jesper Linds... added some commits
Jesper Lindstroem Nielsen Removed piecer from test 19c4c89
Jesper Lindstroem Nielsen changed the opt.show = 0 + (opt.mode == "show") to opt.show = opt.mode
=== "show".

This given i made some changes to some of the uses of opt.show
c9c21cd
Jesper Lindstroem Nielsen changed ' to " and used === instead of == d51e1f2
@jstroem

What if a element is trying to split out of the document like, moves to a negative value or larger than the document is wide/high?

Should this be taken care of maybe?

@gnarf
Owner

I would think it may be possible to wrap the container element in an overflow:hidden that is document width/height so that the animations can go outside the doc all they want but not induce extra scrollbars

@jstroem

I have done this implementation as you mentioned where i wraps the container inside another container with the document height/width if o.crop is false.
The problem now is that this container will be the highest element (lastChild in body) so it will block every other element (clicks on anything else).. do you have an idea how we can fix this?

otherwise we'll need to check left/top on all animation..

@jstroem jstroem closed this
@jstroem jstroem reopened this
@jstroem

Sorry i did push a wrong button just there :)

@gnarf
Owner

Hrmmm - I didn't even think about that issue... lets just leave this feature out for now --- We can add a bug about the split effects "falling off the document border" to worry about for later rather than trying to solve it all right now?

@gnarf
Owner

Considering the issues you brought up with this approach, lets just revert this commit and then worry about it after we get the main part of the effects pulled in

@jstroem

Done!

I have another idea to a feature that could be implemented;
it could be nice if you could (as a option) define the way the effect is happening, like in effects.blockfade where it is comming from top-left and going to bottom-right.
But i don't have any really good idea to implement this?

Jesper Linds... added some commits
Jesper Lindstroem Nielsen Removed direction from the effects not using it! a937f68
Jesper Lindstroem Nielsen testing c07b28b
Jesper Lindstroem Nielsen Merge branch 'refs/heads/split' of https://lindstroem@github.com/lind…
…stroem/jquery-ui.git into HEAD
7cd1157
Jesper Lindstroem Nielsen trailing comma removed 66bc0fb
Jesper Lindstroem Nielsen Added complete to options list.
Used counter instead of array to count pieces in childProcess (a
little better for memory)
66c830d
Jesper Lindstroem Nielsen Minor changes 5c464cc
@gnarf
Owner

RE your old comment about blockfade direction, we could use an option like origin: "left top", but it would need to support top/center/bottom left/center/right -- Take a look at the UI Position arguments on http://docs.jquery.com/UI/API/1.8/Position

@gnarf
Owner

There was an update to the core functions that requires updating this branch. -- The .queue() portion is handled in effects.core now.

@gnarf
Owner

This pull has gone stale, any chance we can get it freshened up?

@jstroem

so there is really 2 things to this pull the first is the split thing just on normal elements and, as far as i know, there is nothing more to put into this? it works right?

then there is the effects on the text witch i have made some of but as i remember have some problems with. So i will write this on my todo list and i should have time se whats needed!

@jstroem

ohh.. just looked at the repo..
this is only a pull on the split things on the html elements not the text split?

I think i stopped working on the text split effects because there were some guys (on weekly dev meetings) that said this split wasn't going to get under the hood of jquery ui?

but i don't know if that has changed now where 2.0 is a little closer?

@gnarf
Owner

We can look again at the text split, but I still think this could use some freshening up... I'd like to see the split effects land in 1.9, but It no longer merges cleanly with master, and I believe its still using an API that isn't current in 1.9... track me down, talk with me about it :)

@jstroem

i just gonna take a quick look at the code tomorrow and then i will catch you at irc and we can discuss whats need to be done!

@paulirish

@lindstroem can you summarize what the status is? I'd love to see this make its way in and can ask Scott to take a look..

@gnarf
Owner

I'm still willing to update this branch myself if @lindstroem doesn't have the time for it

Jesper Lindstroem Nielsen dummy change 928be4e
@jstroem

Yea. so I've been looking into it today and it is good to go.. but the merging with master fails as i understand from @gnarf37.. so if there is something there needs to be updated in the code just notifiy me!

@jstroem jstroem closed this
@paulirish

lindstroem can you reopen ;)

@jstroem jstroem reopened this
Jesper Linds... added some commits
Jesper Lindstroem Nielsen Merge branch 'master' of https://github.com/jquery/jquery-ui into split
Conflicts:
	tests/unit/effects/effects.html
	tests/visual/effects/effects.all.html

Made merge
f572598
Jesper Lindstroem Nielsen Revert "dummy change"
This reverts commit 928be4e.
daaea85
Jesper Lindstroem Nielsen Trying to make reverting 6bd1a43
Jesper Lindstroem Nielsen reverting 34d956b
Jesper Lindstroem Nielsen Reverting e698953
Jesper Lindstroem Nielsen reverting 57906d3
Jesper Lindstroem Nielsen Revert goddammit! 8756332
@jstroem

@gnarf37: any news on this?

@Jellyfrog

Bump

@jstroem

been looking into this; in the pull request status: http://oksoclap.com/ui-pull-requests the following is pointed out:

#185 - Split

  • on hold, waiting for a big block of time to review new set of effects
  • would rather get existing code cleaned up first

i don't know if anyone is up for reviewing and how the status is for the other cleaning tasks. I will try to be at the weekly meeting for UI today and ask into this.

@gnarf
Owner

We haven't used that clap in a while, but that was the last time we did a big group review of pulls.

I do want this to land in 1.9 soon, but I'm pretty involved in some other areas of the project right now that stop me from doing the necessary work at the current moment.

@mikesherov
Collaborator

@gnarf37, @scottgonzalez, @jzaefferer ping.

@scottgonzalez

We're still waiting until we've cleaned up more of the existing code before adding more effects.

@mikesherov
Collaborator

Thanks again for the had work here, but we've finally decided that we're not going to pursue further effects at this time, and therefore, are closing this pull request.

@mikesherov mikesherov closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 24, 2011
  1. Added the new $.effects.piecer

    Jesper Lindstroem Nielsen authored
  2. Tried the piecer

    Jesper Lindstroem Nielsen authored
Commits on Mar 26, 2011
  1. First split effect "build" created! need to checkup on the .hide func.

    Jesper Lindstroem Nielsen authored
Commits on Mar 27, 2011
  1. Made some bugs so now build works propperly.

    Jesper Lindstroem Nielsen authored
    Still considering using $.effects.createWrapper and
    $.effects.save/restore.
  2. Pinwheel is up!

    Jesper Lindstroem Nielsen authored
Commits on Mar 28, 2011
  1. test text updated!

    Jesper Lindstroem Nielsen authored
  2. testing

    Jesper Lindstroem Nielsen authored
  3. Rewriting so interval can be zero

    Jesper Lindstroem Nielsen authored
  4. Indentation magic

    Jesper Lindstroem Nielsen authored
Commits on Mar 29, 2011
  1. Using the builtin effects.save/restore functions instead of

    Jesper Lindstroem Nielsen authored
    hardcoding
  2. blockfade added and tested!

    Jesper Lindstroem Nielsen authored
  3. Shear is on!

    Jesper Lindstroem Nielsen authored
  4. sexplode is inserted in one split file to unite all of em'

    Jesper Lindstroem Nielsen authored
Commits on Apr 1, 2011
  1. Minor fixes added

    Jesper Lindstroem Nielsen authored
  2. Minor fixes

    Jesper Lindstroem Nielsen authored
  3. refixing defects

    Jesper Lindstroem Nielsen authored
  4. Removed offset variable in $.effects.effect.build

    Jesper Lindstroem Nielsen authored
  5. Removed last TODO's

    Jesper Lindstroem Nielsen authored
Commits on Apr 27, 2011
  1. Removed piecer from test

    Jesper Lindstroem Nielsen authored
  2. changed the opt.show = 0 + (opt.mode == "show") to opt.show = opt.mode

    Jesper Lindstroem Nielsen authored
    === "show".
    
    This given i made some changes to some of the uses of opt.show
  3. changed ' to " and used === instead of ==

    Jesper Lindstroem Nielsen authored
Commits on May 15, 2011
  1. Dryed things around the setup of options

    Jesper Lindstroem Nielsen authored
  2. Added support so the animation won't go out side of the document size

    Jesper Lindstroem Nielsen authored
Commits on May 16, 2011
  1. Removed the wrapper with document height/width!

    Jesper Lindstroem Nielsen authored
Commits on May 17, 2011
  1. Removed direction from the effects not using it!

    Jesper Lindstroem Nielsen authored
Commits on May 18, 2011
  1. testing

    Jesper Lindstroem Nielsen authored
  2. Merge branch 'refs/heads/split' of https://lindstroem@github.com/lind…

    Jesper Lindstroem Nielsen authored
    …stroem/jquery-ui.git into HEAD
Commits on May 21, 2011
  1. trailing comma removed

    Jesper Lindstroem Nielsen authored
Commits on May 24, 2011
  1. Added complete to options list.

    Jesper Lindstroem Nielsen authored
    Used counter instead of array to count pieces in childProcess (a
    little better for memory)
Commits on May 25, 2011
  1. Minor changes

    Jesper Lindstroem Nielsen authored
Commits on Jul 23, 2011
  1. Merge branch 'master' of https://github.com/jquery/jquery-ui into

    Jesper Lindstroem Nielsen authored
    split
  2. Changed so the effects uses the new DRY version of effects.core

    Jesper Lindstroem Nielsen authored
Commits on Nov 9, 2011
  1. dummy change

    Jesper Lindstroem Nielsen authored
  2. Merge branch 'master' of https://github.com/jquery/jquery-ui into split

    Jesper Lindstroem Nielsen authored
    Conflicts:
    	tests/unit/effects/effects.html
    	tests/visual/effects/effects.all.html
    
    Made merge
  3. Revert "dummy change"

    Jesper Lindstroem Nielsen authored
    This reverts commit 928be4e.
  4. Trying to make reverting

    Jesper Lindstroem Nielsen authored
  5. reverting

    Jesper Lindstroem Nielsen authored
  6. Reverting

    Jesper Lindstroem Nielsen authored
  7. reverting

    Jesper Lindstroem Nielsen authored
  8. Revert goddammit!

    Jesper Lindstroem Nielsen authored
This page is out of date. Refresh to see the latest.
View
0  build/build/minify-js.sh 100755 → 100644
File mode changed
View
0  build/release/prepare-release 100755 → 100644
File mode changed
View
4 tests/unit/effects/effects.html
@@ -25,11 +25,11 @@
"ui/jquery.effects.scale.js",
"ui/jquery.effects.shake.js",
"ui/jquery.effects.slide.js",
- "ui/jquery.effects.transfer.js"
+ "ui/jquery.effects.transfer.js",
+ "ui/jquery.effects.split.js"
]
});
</script>
-
<link rel="stylesheet" href="../../../external/qunit.css">
<script src="../../../external/qunit.js"></script>
<script src="../../jquery.simulate.js"></script>
View
30 tests/visual/effects/effects.all.html
@@ -19,6 +19,7 @@
<script src="../../../ui/jquery.effects.shake.js"></script>
<script src="../../../ui/jquery.effects.slide.js"></script>
<script src="../../../ui/jquery.effects.transfer.js"></script>
+ <script src="../../../ui/jquery.effects.split.js"></script>
<script src="effects.all.js"></script>
</head>
<body>
@@ -210,7 +211,36 @@
<p>hide/show (jQuery)</p>
</div>
</li>
+
+ <li>
+ <div class="effect" id="build">
+ <p>Build</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="pinwheel">
+ <p>Pinwheel</p>
+ </div>
+ </li>
+ <li>
+ <div class="effect" id="blockfade">
+ <p>blockfade</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="shear">
+ <p>shear</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="sexplode">
+ <p>sexplode</p>
+ </div>
+ </li>
</ul>
</body>
View
6 tests/visual/effects/effects.all.js
@@ -103,4 +103,10 @@ $(function() {
return "current";
}, duration);
});
+
+ effect('#build', "build", {easing: 'linear' });
+ effect('#pinwheel', "pinwheel", {easing: 'linear' });
+ effect('#blockfade', "blockfade", {easing: 'linear' });
+ effect('#shear', "shear", {easing: 'linear' });
+ effect('#sexplode', "sexplode", {easing: 'linear' });
});
View
567 ui/jquery.effects.split.js
@@ -0,0 +1,567 @@
+/*
+ * jQuery UI Effects Explode @VERSION
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Effects/Split (Not yet!)
+ *
+ * Depends:
+ * jquery.effects.core.js
+ *
+ */
+
+(function( $, undefined ) {
+
+ //Helper function to control the split on each animation
+ function startSplitAnim( el, o, animation, done ) {
+
+ //Support for pieces
+ if ( ( !o.rows || !o.columns ) && o.pieces ) {
+ o.rows = o.columns = Math.round( Math.sqrt( o.pieces ) );
+ } else {
+ o.rows = o.rows || 3;
+ o.columns = o.columns || 3;
+ }
+
+ var interval = o.interval,
+ duration = o.duration - ( o.rows + o.columns ) * interval,
+ pieceCounter = o.rows * o.columns,
+ documentCoords = {
+ height: $( document ).height(),
+ width: $( document ).width()
+ },
+ parentCoords, container, i, j, pieces, properties, width, height, firstEl;
+
+ $.effects.save( el, [ "visibility", "opacity" ] );
+
+ parentCoords = el.show().css( "visibility", "hidden" ).offset();
+ parentCoords.width = el.outerWidth();
+ parentCoords.height = el.outerHeight();
+
+ if ( interval === false ){
+ interval = o.duration / ( o.rows + o.columns * 2 );
+ }
+
+ //split into pieces
+ pieces = $.effects.piecer( el, o );
+ firstEl = $( pieces[ 0 ] );
+ container = firstEl.parent().addClass( "ui-effects-split" );
+ width = firstEl.outerWidth();
+ height = firstEl.outerHeight();
+
+ container.css( "overflow", o.crop ? "hidden" : "visible" );
+
+ //Make animation
+ for ( i = 0; i < o.rows; i++ ) {
+ for ( j = 0; j < o.columns; j++ ) {
+ // call the animation for each piece.
+ animation.call( pieces[ i*o.columns + j ], width, height, interval, duration, i, j, documentCoords, parentCoords, childComplete );
+ }
+ }
+
+ // children animate complete
+ function childComplete() {
+ pieceCounter--;
+ if ( pieceCounter === 0 ) {
+ animComplete();
+ }
+ }
+
+ function animComplete() {
+ // Ensures that the element is hidden/shown correctly
+ $.effects.restore( el, [ "visibility", "opacity" ] );
+
+ if ( o.show ) {
+ el.show();
+ } else {
+ el.hide();
+ }
+
+ container.remove( );
+
+ done();
+ }
+
+ }
+
+ //Intern function for setting up standard options
+ function splitOptions( el, defaults, o ) {
+ var opt = $.extend( defaults, o );
+ //Reverse it if it is hidden and mode is toggle
+ if ( el.is( ":hidden" ) && opt.mode === "toggle" ) {
+ opt.reverse = !opt.reverse;
+ }
+
+ //Sets mode for toggle
+ opt.mode = $.effects.setMode( el, opt.mode );
+ opt.show = opt.mode === "show";
+
+ return opt;
+ }
+
+ /*
+ * Options
+ * rows
+ * columns
+ * pieces
+ */
+ $.effects.piecer = function( el, o ){
+
+ //Support pieces
+ if ( ( !o.rows || !o.columns ) && o.pieces ) {
+ o.rows = o.columns = Math.round( Math.sqrt( o.pieces ) );
+ } else {
+ o.rows = o.rows || 3;
+ o.columns = o.columns || 3;
+ }
+
+ var height = el.outerHeight(),
@gnarf Owner
gnarf added a note

You're going to want to make sure el is shown here before you start getting offset, etc...

In the old explode effect we use el.show().css('visibility', 'hidden'); at the beginning of the animation, and then use el.css('visibility', 'visible'); in the complete callback, and .hide() the actual element in the callback if it's not a "show" effect...

I would imagine we will want/need the same technique for this piecer....

@jstroem
jstroem added a note

I'm allready doing this in the startSplitAnim function just before we are calling the piecer function (line 37-39).

I could do it one more time in the piecer function so it is more useable for outside users? but it won't make the split functions better!

@gnarf Owner
gnarf added a note

Nope, doubtful its needed - I just totally missed it in startSplitAnim

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ width = el.outerWidth(),
+ position = el.offset(),
+ pieceHeight = Math.ceil( height / o.rows ),
+ pieceWidth = Math.ceil( width / o.columns ),
+ container = $( "<div></div>" ).css({
+ position : "absolute",
+ padding : 0,
+ margin : 0,
+ border : 0,
+ top : position.top + "px",
+ left : position.left + "px",
+ height : height + "px",
+ width : width + "px",
+ zIndex : el.css( "zIndex" )
+ }).appendTo( "body" ),
+ pieces = [],
+ left, top;
+
+ for( top = 0; top < height; top += pieceHeight ){
+ for( left = 0; left < width; left += pieceWidth ){
+ pieces.push(
+ el
+ .clone()
+ .css({
+ position: "absolute",
+ visibility: "visible",
+ top : -top + "px",
+ left : -left + "px"
+ })
+ .wrap( "<div></div>" )
+ .parent()
+ .css({
+ position : "absolute",
+ padding : 0,
+ margin : 0,
+ border : 0,
+ height : pieceHeight + "px",
+ width : pieceWidth + "px",
+ left: left + "px",
+ top: top + "px",
+ overflow : "hidden"
+ }).appendTo( container )
+ );
+ }
+ }
+
+ el.hide();
+
+ return pieces;
+ }
+
+ $.effects.effect.build = function( o, done ){
+
+ /*Options:
+ * random,
+ * reverse,
+ * distance,
+ * rows,
+ * columns,
+ * direction,
+ * duration,
+ * interval,
+ * easing,
+ * crop,
+ * pieces,
+ * fade,
+ * show
+ * complete
+ */
+
+ var el = $( this ),
+ opt = splitOptions( el, {
+ direction: "bottom",
+ distance: 1,
+ reverse: false,
+ random: false,
+ interval: false,
+ fade: true,
+ crop: false
+ }, o );
+
+ function animate( width, height, interval, duration, row, column, documentCoords, parentCoords, callback ) {
+ var random = opt.random ? Math.abs( opt.random ) : 0,
+ el = $( this ),
+ randomDelay = Math.random() * ( opt.rows + opt.columns ) * interval,
+ uniformDelay = ( opt.reverse || opt.distance < 0 ) ?
+ ( ( row + column ) * interval ) :
+ ( ( ( opt.rows + opt.columns ) - ( row + column ) ) * interval ),
+ delay = randomDelay * random + Math.max( 1 - random, 0 ) * uniformDelay,
+ properties = el.offset(),
+ maxTop = documentCoords.height - height,
+ maxLeft = documentCoords.width - width,
+ top, left;
+
+ properties.top -= parentCoords.top;
+ properties.left -= parentCoords.left;
+
+ if ( opt.fade ) {
+ properties.opacity = ( opt.show ? 1 : 0 );
+ el.css( "opacity", opt.show ? 0 : "" );
+ }
+
+
+ if ( opt.direction.indexOf( "bottom" ) !== -1 ) {
+ top = properties.top + parentCoords.height * opt.distance;
+ top = top > maxTop ? maxTop : top;
+ } else if ( opt.direction.indexOf( "top" ) !== -1 ) {
+ top = properties.top - parentCoords.height * opt.distance;
+ top = top < 0 ? 0 : top;
+ }
+
+ if ( opt.direction.indexOf( "right" ) !== -1 ) {
+ left = properties.left + parentCoords.width * opt.distance;
+ left = left > maxLeft ? maxLeft : left;
+ } else if ( opt.direction.indexOf( "left" ) !== -1 ) {
+ left = properties.left - parentCoords.width * opt.distance;
+ left = left < 0 ? 0 : left;
+ }
+
+ if ( opt.direction.indexOf( "right" ) || opt.direction.indexOf( "left" ) ) {
+ if ( opt.show ) {
+ el.css( "left", left );
+ } else {
+ properties.left = left;
+ }
+ }
+
+ if ( opt.direction.indexOf( "top" ) || opt.direction.indexOf( "bottom" ) ) {
+ if ( opt.show ) {
+ el.css( "top", top );
+ } else {
+ properties.top = top;
+ }
+ }
+
+ el.delay( delay ).animate( properties, duration, opt.easing, callback );
+ }
+
+ startSplitAnim( el, opt, animate, done );
+
+ }
+
+ $.effects.effect.pinwheel = function( o, done ) {
+
+ /*Options:
+ * random,
+ * reverse,
+ * distance,
+ * rows,
+ * columns,
+ * duration,
+ * interval,
+ * easing,
+ * pieces,
+ * fade,
+ * show,
+ * complete
+ */
+
+ var el = $( this ),
+ opt = splitOptions ( el, {
+ distance: 1,
+ reverse: false,
+ random: false,
+ interval: 0,
+ fade: true,
+ crop: false
+ }, o );
+
+ function animate( width, height, interval, duration, row, column, documentCoords, parentCoords, callback ) {
+ var random = opt.random ? Math.abs( opt.random ) : 0,
+ el = $( this ),
+ randomDelay = Math.random() * ( opt.rows + opt.columns ) * interval,
+ uniformDelay = ( opt.reverse ) ?
+ ( ( ( opt.rows + opt.columns ) - ( row + column ) ) * interval ) :
+ ( ( row + column ) * interval ),
+ delay = randomDelay * random + Math.max( 1 - random, 0 ) * uniformDelay,
+ startProperties = el.offset(),
+ rowOdd = !( row % 2 ),
+ colOdd = !( column % 2 ),
+ properties, top, left;
+
+ startProperties = {
+ top : startProperties.top - parentCoords.top,
+ left : startProperties.left - parentCoords.left,
+ width : width,
+ height : height
+ };
+
+ //Copy object
+ properties = $.extend( {}, startProperties );
+
+ // If we have only rows or columns, ignore the other dimension
+ if ( opt.columns === 1 ) {
+ colOdd = !rowOdd;
+ } else if ( opt.rows === 1 ) {
+ rowOdd = colOdd;
+ }
+
+ if ( opt.fade ) {
+ properties.opacity = ( opt.show ? 1 : 0 );
+ startProperties.opacity = 1;
+ }
+
+ if ( colOdd ) {
+ if ( rowOdd ) {
+ properties.top = properties.top + height * opt.distance;
+ } else {
+ properties.left = properties.left + width * opt.distance;
+ }
+ }
+
+ if ( colOdd != rowOdd ) {
+ properties.width = width * ( 1 - opt.distance );
+ } else {
+ properties.height = height * ( 1 - opt.distance );
+ }
+
+ if ( opt.show ) {
+ el.css( properties );
+ if ( opt.fade ) {
+ el.css( "opacity", 0 );
+ }
+ properties = startProperties;
+ }
+
+ el.delay( delay ).animate( properties, duration, opt.easing, callback );
+ }
+
+ startSplitAnim( el, opt, animate, done );
+ }
+
+ $.effects.effect.blockfade = function( o, done ) {
+
+ /*Options:
+ * random,
+ * reverse,
+ * rows,
+ * columns,
+ * duration,
+ * interval,
+ * easing,
+ * pieces,
+ * show,
+ * complete
+ */
+
+ var el = $( this ),
+ opt = splitOptions( el, {
+ distance: 1,
+ reverse: false,
+ random: false,
+ interval: false
+ }, o );
+
+ function animate( width, height, interval, duration, row, column, documentCoords, parentCoords, callback ) {
+ var random = opt.random ? Math.abs( opt.random ) : 0,
+ el = $( this ),
+ randomDelay = Math.random() * ( opt.rows + opt.columns ) * interval,
+ uniformDelay = ( opt.reverse ) ?
+ ( ( ( opt.rows + opt.columns ) - ( row + column ) ) * interval ) :
+ ( ( row + column ) * interval ),
+ delay = randomDelay * random + Math.max( 1 - random, 0 ) * uniformDelay;
+
+ if ( opt.show ) {
+ el.css( "opacity", 0 );
+ }
+
+ el.delay( delay ).animate( { opacity: ( opt.show ? 1 : 0 ) }, duration, opt.easing, callback );
+ }
+
+ startSplitAnim( el, opt, animate, done );
+ }
+
+ $.effects.effect.sexplode = function( o, done ) {
+
+ /*Options:
+ * random,
+ * reverse,
+ * distance,
+ * rows,
+ * columns,
+ * duration,
+ * sync,
+ * easing,
+ * pieces,
+ * interval,
+ * fade,
+ * show,
+ * complete,
+ * crop
+ */
+
+ var el = $( this ),
+ opt = splitOptions( el, {
+ distance: 1,
+ reverse: false,
+ random: false,
+ sync: false,
+ interval: false,
+ fade: true,
+ crop: false
+ }, o );
+
+ function animate( width, height, interval, duration, row, column, documentCoords, parentCoords, callback ) {
+ var el = $( this ),
+ delay = 0,
+ startProperties = el.offset(),
+ distance = opt.distance,
+ randomX = 0,
+ randomY = 0,
+ properties, distanceX, distanceY, distanceXY, seed;
+
+ startProperties = {
+ top : startProperties.top - parentCoords.top,
+ left : startProperties.left - parentCoords.left
+ };
+
+ //Copy object
+ properties = $.extend( {}, startProperties );
+
+ if ( opt.fade ) {
+ properties.opacity = ( opt.show ? 1 : 0 );
+ startProperties.opacity = 1;
+ }
+
+ if ( opt.random ) {
+ seed = ( Math.random() * opt.random ) + Math.max( 1 - opt.random, 0 );
+ distance *= seed;
+ duration *= seed;
+
+ // To syncronize, give each piece an appropriate delay so they end together
+ if ( opt.sync ) {
+ delay = opt.duration - duration;
+ }
+ randomX = Math.random() - 0.5;
+ randomY = Math.random() - 0.5;
+ }
+
+ distanceY = ( parentCoords.height - height ) / 2 - height * row;
+ distanceX = ( parentCoords.width - width ) / 2 - width * column;
+ distanceXY = Math.sqrt( Math.pow( distanceX, 2 ) + Math.pow( distanceY, 2 ) );
+ properties.top -= distanceY * distance + distanceXY * randomY;
+ properties.left -= distanceX * distance + distanceXY * randomX;
+
+ if ( opt.show ) {
+ el.css( properties );
+ if ( opt.fade ) {
+ el.css( "opacity", 0 );
+ }
+ properties = startProperties;
+ }
+
+ el.delay( delay ).animate( properties, duration, opt.easing, callback );
+ }
+
+ startSplitAnim( el, opt, animate, done );
+ }
+
+ $.effects.effect.shear = function( o, done ) {
+ /*Options:
+ * random,
+ * reverse,
+ * distance,
+ * rows,
+ * columns,
+ * duration,
+ * interval,
+ * easing,
+ * pieces,
+ * fade,
+ * show,
+ * show,
+ * complete
+ * crop
+ */
+
+ var el = $( this ),
+ opt = splitOptions( el, {
+ distance: 1,
+ reverse: false,
+ random: false,
+ interval: false,
+ fade: true,
+ crop: false
+ }, o );
+
+ function animate( width, height, interval, duration, row, column, documentCoords, parentCoords, callback ) {
+ var random = opt.random ? Math.abs( opt.random ) : 0,
+ el = $( this ),
+ randomDelay = Math.random() * ( opt.rows + opt.columns ) * interval,
+ uniformDelay = ( opt.reverse ) ?
+ ( ( ( opt.rows + opt.columns ) - ( row + column ) ) * interval ) :
+ ( ( row + column ) * interval ),
+ delay = randomDelay * random + Math.max( 1 - random, 0 ) * uniformDelay,
+ startProperties = el.offset(),
+ rowOdd = !( row % 2 ),
+ colOdd = !( column % 2 ),
+ properties, top, left;
+ startProperties = {
+ top : startProperties.top - parentCoords.top,
+ left : startProperties.left - parentCoords.left,
+ width : width,
+ height : height
+ };
+
+ //Copy object
+ properties = $.extend( {}, startProperties );
+
+ // If we have only rows or columns, ignore the other dimension
+ if ( opt.columns === 1 ) {
+ colOdd = rowOdd;
+ } else if ( opt.rows === 1 ) {
+ rowOdd = !colOdd;
+ }
+
+ if ( opt.fade ) {
+ properties.opacity = 0;
+ startProperties.opacity = 1;
+ }
+
+ if ( colOdd === rowOdd ) {
+ if ( !colOdd ) {
+ properties.left -= opt.distance * parentCoords.width;
+ } else {
+ properties.left += opt.distance * parentCoords.width;
+ }
+ } else {
+ if ( !colOdd ){
+ properties.top -= opt.distance * parentCoords.height;
+ } else {
+ properties.top += opt.distance * parentCoords.height;
+ }
+ }
+
+ if ( opt.show ) {
+ el.css( properties );
+ properties = startProperties;
+ }
+
+ el.delay( delay ).animate( properties, duration, opt.easing, callback );
+ }
+
+ startSplitAnim( el, opt, animate, done );
+ }
+
+})( jQuery );
Something went wrong with that request. Please try again.