Question

如果我没有在这个问题上使用正确的字词，请提前抱歉。我不知道还有什么可以称之为。

我有一堆div，它们是由css制作的圆圈，以内联方式显示。当它们被点击（从左到右逐个）时，它们会被动画化为“弹出”，因为它们会快速放大然后缩小回原始大小。

动画效果很好，但问题是，当一个圆圈动画时，它也会移动整个div（圆圈）线。 我希望我的动画能够显示，使得它们看起来像是在一条直线上（将其视为一条火车线），并且它会在不移动整条线的情况下放大和缩小。

我尝试在所有点周围创建一个div包装器，但它没有解决问题。我也尝试在动画上调整一些选项（更具体地说是overflow）。我该如何解决这个问题？

这是JSFiddle

Answer 1

雅我完全使用@sajithnair，所以你必须做绝对定位

Check out here

就像这样我使用了绝对定位并完成了所有你需要做的就是现在在点之间添加 -

刚好像这样把你的css安置好了

.full-circle {
 background-color: rgba(51, 51, 51, 100);
 border: 5px solid #333;
 border-radius:50%;
 height: 10px;
 width: 10px;
 -moz-border-radius:15px;
 -webkit-border-radius: 15px;
 display:inline-block;
 position:absolute;
 top:5px;
}

.full-circle-green {
 background-color: rgba(11, 227, 0, 100);
 border: 5px solid #333;
 border-radius:50%;
 height: 10px;
 width: 10px;
 -moz-border-radius:15px;
 -webkit-border-radius: 15px;
 display:inline-block;
 position:absolute;
 top:5px;

Answer 2

相对于绝对定位，我已经改变了http://jsfiddle.net/sajith/65JEq/。

<强> HTML

<div id='dots'></div>

<强>的Javascript

$(function () {

    var gCurrentDot = 1;

    var str = '<div id="1" class="full-circle"></div><span></span>';
    for(var i=2; i<=10; i++) {
        str += '&#8213;<div id="'+(i)+'" class="full-circle"></div><span></span>';
        $('#'+ i).css({left: i*10});
    }
    $("#dots").html(str);

    $('.full-circle').click(function() {
        $('#'+ gCurrentDot +'').addClass('full-circle-green').animate({height: "30px", width:"30px",marginLeft:"-10px",marginTop:"-5px"}, {duration: 200, complete:function() {
            $(this).animate({height: "10px", width:"10px",marginLeft:"0px",marginTop:"5px"}, {duration: 200});
        }});
        gCurrentDot++;
    });
});

<强> CSS

.full-circle {
 background-color: rgba(51, 51, 51, 100);
 border: 5px solid #333;
 border-radius:50%;
 height: 10px;
 width: 10px;
 -moz-border-radius:15px;
 -webkit-border-radius: 15px;
 display:inline-block;
 position:absolute;
 margin-top:5px;
}

.full-circle-green {
 background-color: rgba(11, 227, 0, 100);
 border: 5px solid #333;
 border-radius:50%;
 height: 10px;
 width: 10px;
 -moz-border-radius:15px;
 -webkit-border-radius: 15px;
 display:inline-block;
 position:absolute;
}

#dots span {
    width: 20px;
    height: 20px;
    display:inline-block;
}

Answer 3

添加CSS

 .test{ position:absolute;}
 .wrapper{ position:relative}

HTML

<div class="wrapper">
  <div id="1" class="full-circle"></div>&#8213;
  <div id="2" class="full-circle"></div>&#8213;
  <div id="3" class="full-circle"></div>&#8213;
  <div id="4" class="full-circle"></div>&#8213;
  <div id="5" class="full-circle"></div>&#8213;
  <div id="6" class="full-circle"></div>&#8213;
  <div id="7" class="full-circle"></div>&#8213;
  <div id="8" class="full-circle"></div>&#8213;
  <div id="9" class="full-circle"></div>&#8213;
  <div id="10" class="full-circle"></div>
</div>

添加新的包装器div

SCRIPT

var gCurrentDot = 1;

$('.full-circle').click(function() {
   var pos = $('#'+ gCurrentDot +'').position();
   var posLeft = pos.left;
   var posTop = pos.top; 

   $('body').append('<div class="full-circle-green test"></div>');
   $('.test').css('left',posLeft).css('top',posTop).animate({height: "30px", width:"30px"}, {duration: 200, complete:function() {
        $(this).animate({height: "10px", width:"10px"}, {duration: 500});
    }});

         setTimeout(function () {
             $('.test').remove();
            $('#'+ gCurrentDot +'').addClass('full-circle-green');
             gCurrentDot++;
        }, 500);

});

允许我的动画“可见溢出”

3 个答案: