在元素中添加动画(Add animation in element)
我正在开发一个简单的应用程序，它可以在元素中传输一个元素。 所以我有两组形状，方形和圆形。 首先，我必须选择一个圆形，然后选择一个正方形，当我点击一个正方形时，我选择的圆圈将在正方形内移动。 代码工作正常，它只是，我必须添加动画，就像圆圈在我选择的方块内移动。
希望你能理解我。
谢谢
CODEPEN
$('.circle').click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
var selected = $(this);
$('.container .square').click(function() {
$(this).addClass('selected');
$(this).html(selected);
});
});
.container {
height: 230px;
width: 110px;
background-color: #eee;
padding: 10px;
position: relative;
border: 1px solid #DDD;
}
.round {
position: absolute;
bottom: 10px;
}
.square {
cursor: pointer;
display: inline-block;
width: 50px;
height: 50px;
border: 1px solid #f60;
position: relative;
}
.square .circle {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.circle {
cursor: pointer;
display: inline-block;
width: 45px;
height: 45px;
border: 1px solid green;
border-radius: 100px;
text-align: center;
position: relative;
}
.circle span {
width: 10px;
height: 20px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.circle.selected {
background-color: #FFFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="round">
<div class="circle">
<span>1</span>
</div>
<div class="circle">
<span>2</span>
</div>
<div class="circle">
<span>3</span>
</div>
<div class="circle">
<span>4</span>
</div>
</div>
</div>
I'm working on a simple app, that transfers an element inside an element. So I have 2 set of shapes, square and circle. First I have to choose a circle and then a square, the moment I click on a square, the circle that I chose will be move inside the square. the code is working fine, its just, I have to add animation like the circle is moving inside the square I choose.
Hope you understand me.
Thanks
CODEPEN
$('.circle').click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
var selected = $(this);
$('.container .square').click(function() {
$(this).addClass('selected');
$(this).html(selected);
});
});
.container {
height: 230px;
width: 110px;
background-color: #eee;
padding: 10px;
position: relative;
border: 1px solid #DDD;
}
.round {
position: absolute;
bottom: 10px;
}
.square {
cursor: pointer;
display: inline-block;
width: 50px;
height: 50px;
border: 1px solid #f60;
position: relative;
}
.square .circle {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.circle {
cursor: pointer;
display: inline-block;
width: 45px;
height: 45px;
border: 1px solid green;
border-radius: 100px;
text-align: center;
position: relative;
}
.circle span {
width: 10px;
height: 20px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.circle.selected {
background-color: #FFFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="round">
<div class="circle">
<span>1</span>
</div>
<div class="circle">
<span>2</span>
</div>
<div class="circle">
<span>3</span>
</div>
<div class="circle">
<span>4</span>
</div>
</div>
</div>
最满意答案
我认为你正在寻找类似下面的代码片段。
问题是你不知道你的圈子在哪里以及它必须走到哪个方格。 $selected.offset()是元素在屏幕上的position: fixed它将圆圈放在屏幕上与其所在位置相同的位置。
然后动画确保将圆圈从它的新位置动画到屏幕上正方形的位置（因此$this.offset ，即方形的位置）。
var $body = $('body'),
$selected;
$('.round .circle').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
$selected = $(this);
});
$('.container .square').click(function(){
if ($selected) {
var $this = $(this);
$selected.css({
top: $selected.offset().top,
left: $selected.offset().left,
position: 'absolute'
}).appendTo($body).animate({
top: $this.offset().top + 2,
left: $this.offset().left + 2
}, 1000, function() {
$(this).css({
position: 'absolute',
top: 'auto',
left: 'auto',
}).appendTo($this);
});
$this.addClass('selected');
}
$selected = undefined;
});
.container{
height: 300px;
width: 110px;
background-color: #eee;
padding: 10px;
position: relative;
border: 1px solid #DDD;
}
.round{
position: absolute;
bottom: 10px;
}
.square{
cursor: pointer;
display: inline-block;
width: 50px;
height: 50px;
border: 1px solid #f60;
position: relative;
}
.square .circle{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.circle{
cursor: pointer;
display: inline-block;
width: 45px;
height: 45px;
border: 1px solid green;
border-radius: 100px;
text-align: center;
position: relative;
}
.circle span{
width: 10px;
height: 20px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.circle.selected{
background-color: #FFFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="round">
<div class="circle">
<span>1</span>
</div>
<div class="circle">
<span>2</span>
</div>
<div class="circle">
<span>3</span>
</div>
<div class="circle">
<span>4</span>
</div>
</div>
</div>
一些想法：
结束动画后，您可以再次将元素添加到正方形并删除临时样式（顶部，左侧和位置）。 但我认为你能做到这一点:)
I think your looking for something like the snippet below.
The problem is that you don't know where your circle is and to what square it must go. The $selected.offset() is the position of the element on the screen and with the position: fixed it places the circle on the screen at the same position it was on.
Then the animation makes sure to animate the circle from it's new position, to the position of the square on the screen (hence the $this.offset, which is the position of the square).
var $body = $('body'),
$selected;
$('.round .circle').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
$selected = $(this);
});
$('.container .square').click(function(){
if ($selected) {
var $this = $(this);
$selected.css({
top: $selected.offset().top,
left: $selected.offset().left,
position: 'absolute'
}).appendTo($body).animate({
top: $this.offset().top + 2,
left: $this.offset().left + 2
}, 1000, function() {
$(this).css({
position: 'absolute',
top: 'auto',
left: 'auto',
}).appendTo($this);
});
$this.addClass('selected');
}
$selected = undefined;
});
.container{
height: 300px;
width: 110px;
background-color: #eee;
padding: 10px;
position: relative;
border: 1px solid #DDD;
}
.round{
position: absolute;
bottom: 10px;
}
.square{
cursor: pointer;
display: inline-block;
width: 50px;
height: 50px;
border: 1px solid #f60;
position: relative;
}
.square .circle{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.circle{
cursor: pointer;
display: inline-block;
width: 45px;
height: 45px;
border: 1px solid green;
border-radius: 100px;
text-align: center;
position: relative;
}
.circle span{
width: 10px;
height: 20px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.circle.selected{
background-color: #FFFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="round">
<div class="circle">
<span>1</span>
</div>
<div class="circle">
<span>2</span>
</div>
<div class="circle">
<span>3</span>
</div>
<div class="circle">
<span>4</span>
</div>
</div>
</div>
Some thoughts:
After ending the animation, you could add the element to the square again and remove the temporary styling (the top, left and position). But I think you're able to do that :)
更多推荐
发布评论