讓孩子在父容器內

Question

我想向tags cloud plugin添加一些動畫。 但我堅持一個問題。我如何保持父容器內的子元素（標籤）？我想確保動畫位置永遠不會與容器邊緣之一重疊。

Codepen URL：http://codepen.io/anon/pen/vgLdWV我特別註釋掉了「overflow：hidden;」所以你可以看到標籤在容器外飛行。

function getRandom (max, min) { 
    return Math.floor(Math.random() * (1 + max - min) + min); 
} 

var words = [ 
     {text: "performance", weight: getRandom(2, 8)}, 
     {text: "education", weight: getRandom(2, 8)}, 
     {text: "employee", weight: getRandom(2, 8)}, 
     {text: "people", weight: getRandom(2, 8)}, 
     {text: "future", weight: getRandom(2, 8)}, 
     {text: "success", weight: getRandom(2, 8)}, 
     {text: "talent", weight: getRandom(2, 8)}, 
     {text: "career", weight: getRandom(2, 8)}, 
     {text: "strategy evaluate", weight: getRandom(2, 8)}, 
     {text: "training & development", weight: getRandom(2, 8)}, 
     {text: "learn", weight: getRandom(2, 8)}, 
     {text: "activities", weight: getRandom(2, 8)} 
    ]; 
    $('#keywords').jQCloud(words, { 
     shape: 'elliptic', 
     removeOverflowing: false, 
     afterCloudRender: function() { 



      var box = $(this); 
      var width = box.width(); 
      var height = box.height(); 
      var chute = $('span', box); 



      chute.each(function() { 
       foo($(this)); 
      }); 



      function foo($el) { 
       var $top = (Math.random() * (height - $el.height() - $el.position().top)) | 0; 
       var $left = (Math.random() * (width - $el.width() - $el.position().left)) | 0; 
       var time = Math.random() * (1200 - 400) + 400 | 0; 


       new TimelineLite({ 
        onComplete: function() { 
         foo($el); 
        } 
       }) 
       .to($el, time/100, { 
        y: $top * (Math.round(Math.random()) * 2 - 1), 
        x: $left * (Math.round(Math.random()) * 2 - 1), 
        z: getRandom(-200, 200) * (Math.round(Math.random()) * 2 - 1), 
        transformPerspective: 800, 
        force3D: true, 
        ease: SlowMo.ease.config(0.3, 0.7, false) 
       }, 'one') 
       .to($el, time/200, { 
        opacity: 1, 
        ease: SlowMo.ease.config(0.3, 0.7, false) 
       }, 'one') 
       .to($el, time/200, { 
        opacity: 0, 
        ease: SlowMo.ease.config(0.3, 0.7, false) 
       }, time/200, 'one') 
       .set($el, { 
        y: $top * (Math.round(Math.random()) * 2 - 1), 
        x: $left * (Math.round(Math.random()) * 2 - 1), 
        force3D: true 
       }); 


      } 


     } 
    }); 

Answer 1

如果有人感興趣，here is my solution現在

$('#tagscloud').jQCloud(words, { 
     // shape: 'elliptic', 
     removeOverflowing: false, 
     afterCloudRender: function() { 
      var $box  = $(this), 
       $boxWidth = $box.width(), 
       $boxHeight = $box.height(); 

     // 
      $('span', $box).each(function() { 
       tagsMovement($(this)); 
      }); 

     // 
      function tagsMovement (el) { 
       var topY = $(el).position().top, 
        bottomY = $boxHeight - $(el).height() - $(el).position().top, 
        $top = topY >= bottomY ? -getRandom(15, topY) : getRandom(15, bottomY), 

        leftX = $(el).position().left, 
        rightX = $boxWidth - $(el).width() - $(el).position().left, 
        $left = leftX >= rightX ? -getRandom(15, leftX) : getRandom(15, rightX), 

        time  = Math.random() * (1200 - 400) + 400 | 0; 

       // var $top = (Math.random() * (height - $(el).height() - $(el).position().top)) | 0; 
       // var $left = (Math.random() * (width - $(el).width() - $(el).position().left)) | 0; 

       new TimelineLite({ 
        onComplete: function() { 
         tagsMovement($(el)); 
        } 
       }) 
       .to($(el), time/75, { 
        y: $top, 
        x: $left, 
        z: getRandom(-300, 300), 
        transformPerspective: 800, 
        force3D: true, 
        ease: Sine.easeInOut 
       }, 'one') 
       .to($(el), time/150, { 
        opacity: 1, 
        ease: Sine.easeInOut 
       }, 'one') 
       .to($(el), time/150, { 
        opacity: 0, 
        ease: Sine.easeInOut 
       }, time/150, 'one') 
       .set($(el), { 
        top: topY + $top, 
        left: leftX + $left, 
        y: 0, 
        x: 0, 
        force3D: true 
       }); 
      } 
     } 
    });