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

对不起，如果我没有用这个问题的话。我不知道还有什么可以称之为的。允许我的动画“可见溢出”

我有一串div是由css制成的圆圈，内嵌显示。当他们被点击时（从左到右依次），他们被动画成“弹出”，因为他们会迅速放大，然后缩回到原来的大小。

动画效果很好，但所有问题都存在，但问题在于，当一个圆圈动画时，它也随着它移动整个div（圆圈）。 我希望我的动画看起来像点在一条直线上（将它想象成一条火车线），它会放大和缩小，而不会改变整条线。

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

这里是一个JSFiddle

来源

2014-03-03 timorthi

你必须改变的逻辑。与相对的divs，我不认为你可以做到这一点。必须使用绝对定位。 – SajithNair

这是怎么回事：http://jsfiddle.net/peteng/937mY/9/ – Pete

@Pete看起来更接近OP想要的东西。你应该把它放在答案中。也许考虑在每个圆圈周围放一个容器，然后从圆圈中溢出......这可能会阻止水平推动。 – Askanison4

这个怎么样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; 
}

来源

2014-03-03 09:53:00 SajithNair

雅我完全地与@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;

来源

2014-03-03 09:25:35

这里似乎有一些错位问题，但我想这可以很容易地解决，当我读了绝对定位。我有一个问题：** - **在JSFiddle中去了哪里？他们是在点的背景吗？不管怎样，谢谢你！ – timorthi

没有它在他们的下面，你只需要增加他们的宽度 –

添加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); 

});

来源

2014-03-03 10:00:36 Dheeraj

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

回答

相关问题