Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

added a couple other methods of binding an element for animation

  • Loading branch information...
commit 4fcdfacd71f32685f2131f60ccd359e2cb32484c 1 parent d8e15c9
@troygoode authored
Showing with 65 additions and 0 deletions.
  1. +65 −0 examples/guide/index.html
View
65 examples/guide/index.html
@@ -194,6 +194,7 @@ <h1 class="sans-serif" style='text-align: center; margin-bottom: 10px'>o_O</h1>
this.speed(this.speed() / 2)
},
animate: function($el){
+ console.log('thing.animate fired')
var self = this
function go(){
$el.fadeToggle(self.speed(), function() {
@@ -207,6 +208,70 @@ <h1 class="sans-serif" style='text-align: center; margin-bottom: 10px'>o_O</h1>
</script>
</div>
+<a class=btn>Animation (OnBind)</a>
+<div id=Animation2 class=example>
+<div class=inner>
+<p data-bind='onbind: animate; text: "fading every " + speed() + "ms"'>Animate Me!</p>
+<button data-bind='click: slowDown'>Slow Down</button>
+<button data-bind='click: speedUp'>Speed Up</button>
+</div>
+<script type='text/skip'>
+var thing = {
+ speed: o_O(800),
+ slowDown: function(){
+ this.speed(this.speed() * 2)
+ },
+ speedUp: function(){
+ this.speed(this.speed() / 2)
+ },
+ animate: function(){
+ console.log('thing.animate fired')
+ var self = this
+ var $el = $(self.el).children("p")
+ function go(){
+ $el.fadeToggle(self.speed(), function() {
+ go()
+ })
+ }
+ go()
+ }
+};
+o_O.bind(thing, '#example')
+</script>
+</div>
+
+<a class=btn>Animation (OnBind 2)</a>
+<div id=Animation3 class=example>
+<div class=inner>
+<p data-bind='text: "fading every " + speed() + "ms"'>Animate Me!</p>
+<button data-bind='click: slowDown'>Slow Down</button>
+<button data-bind='click: speedUp'>Speed Up</button>
+</div>
+<script type='text/skip'>
+var Thing = o_O.model({speed: 800});
+Thing.prototype.slowDown = function(){
+ this.speed(this.speed() * 2)
+};
+Thing.prototype.speedUp = function(){
+ this.speed(this.speed() / 2)
+};
+Thing.prototype.onbind = function(){
+ console.log('onbind fired')
+ var self = this
+ function go(){
+ $(self.el).children("p").fadeToggle(self.speed(), function() {
+ go()
+ })
+ }
+ go()
+};
+var thing = new Thing({speed: 800});
+o_O.bind(thing, '#example')
+</script>
+</div>
+
+
+
<style>.big {font-size: 200% !important; font-weight: bold} </style>
<a class=btn>classes</a>
Please sign in to comment.
Something went wrong with that request. Please try again.