www.webdeveloper.com
Results 1 to 2 of 2

Thread: Append animation to mutiple elements

  1. #1
    Join Date
    Jul 2008
    Posts
    28

    Append animation to mutiple elements

    I am working with this script below, to assign a couple images to move randomly (like a sparkle effect), appended to a element,

    How do i append it to several elements and still have it work, because when i change

    Code:
    $('#onedivelement').append(this.n);
    to let's say

    Code:
     $('div').append(this.n);
    All the images appear but don't move.




    Code:
    var Spark = function() {
      var self = this;
      this.b = 'http://www.setning.com/katrin/images/';
      this.s = ['spark6.png', 'spark7.png', 'spark5.png'];
      this.i = this.s[this.random(this.s.length)];
      this.f = this.b + this.i; 
      this.n = document.createElement('img');  
              
      this.newSpeed().newPoint().display().newPoint().fly();
    };
    
    Spark.prototype.display = function() {
      $(this.n)
       .attr('src', this.f)
       .css('position', 'absolute')
       .css('z-index', this.random(20))
       .css('top', this.pointY)
       .css('left', this.pointX);
                    
      $('#oneelement').append(this.n);
      
      return this;
    };
    
    Spark.prototype.fly = function() {
      var self = this;
      $(this.n).animate({
          "top": this.pointY,
          "left": this.pointX,
      }, this.speed, 'linear', function(){
        self.newSpeed().newPoint().fly();  
      });
    };
    
    Spark.prototype.newSpeed = function() {
      this.speed = (this.random(10) + 5) * 200;
      
      return this;
    };
    
    Spark.prototype.newPoint = function() {
      this.pointX = this.random(50)-20;
      this.pointY = this.random(50)-10;
            
      return this;
    };
    
    Spark.prototype.random = function(max) {
      return Math.ceil(Math.random() * max) - 1;
    }
    
    $(function(){
      // Sparks
      var totalSparks = 10;
      var sparks = [];
      
      for (i = 0; i < totalSparks; i++){  
        sparks[i] = new Spark();
      }
    });

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Shouldn't you specify the JavaScript library/framework used? As there is no JavaScript native code there, we can not guess what happens without knowing which library you have used.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles