允許我的動畫「可見溢出」

對不起，如果我沒有用這個問題的話。我不知道還有什麼可以稱之爲的。允許我的動畫「可見溢出」

我有一串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

允許我的動畫「可見溢出」

回答

相關問題