Question

我有两个元素和一个按钮。当单击按钮时，我试图使第一个元素完全位于另一个元素之上。

＆＃13;

$("#clickme").click(function(){
   $("#frist_element").appendTo("#second_element")

})

＆＃13;

div{
 background-color: red;
 width: 30px;
 height:30px;
 margin: 20px;
 border-radius: 50%;
}


#second_element{
background-color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first_element"></div>
<div id="second_element"></div>

<button id="clickme">Click Me</button>

＆＃13;

单击按钮时，红色圆圈应移动（动画移动）到黄色圆圈，绿色圆圈不应显示

更新：这是一个gif，它显示了我正在寻找的gif

Answer 1

我认为css transform property可能对你有用。还添加了转换延迟以更好看。这是你在找什么？

$("#clickme").click(function(){
	  $("#second").css("transform","translateY(-50px)");
	  $("#first").css("transform","translateY(50px)");
	});

div{
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transition: all 0.4s;
}
#first {
  background-color: red;
}
#second {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first"></div>
<div id="second"></div>

<button id="clickme">Click Me</button>

Answer 2

您可以添加带有标记的属性，并使用之前和之后的函数。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        background-color: red;
        width: 30px;
        height:30px;
        margin: 20px;
        border-radius: 50%;
    }
    #second_element{
        background-color: green;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("#clickme").click(function(){
            if($(this).attr('data-click-state') == 1) {
                $(this).attr('data-click-state', 0)
                $("#first_element").before($("#second_element"))
            } else {
                $(this).attr('data-click-state', 1)
                $("#first_element").after($("#second_element"))
            };
        });
    });
</script>
</head>
<body>

<div id="first_element"></div>
<div id="second_element"></div>

<button id="clickme">Click Me</button>

</body>
</html>

Answer 3

完成后，我只需添加相对于第一个div的位置，然后使用animation功能添加到第一个div的顶部位置。在那之后，第一个进入第二个div。

＆＃13;

$("#clickme").click(function(){
    var secondDivPosition=$("#second_element").position();
       var firstDivPosition=$("#first_element").position();
 
    var topSecond =secondDivPosition.top.toString()+'px';
      var topFirst =firstDivPosition.top.toString()+'px';
      
    if(firstDivPosition.top==secondDivPosition.top)
    {
      $("#first_element").animate({"top":"0px"},300, function() {});
            $("#second_element").css({"visibility":"initial"});
      
   
    }else
    {
      $("#first_element").animate({"top":topSecond},300, function() {
        $("#second_element").css({"visibility":"hidden"});
      });
    
      
    
    }

  
  });

＆＃13;

div{
 background-color: red;
 width: 30px;
 height:30px;
 margin: 20px;
 border-radius: 50%;
}

  #first_element{
    position: relative;
   }


#second_element{
background-color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first_element"></div>
<div id="second_element"></div>

<button id="clickme">Click Me</button>

＆＃13;

Answer 4

您需要container来检测当前status 然后只需capture divs，然后与他们一起玩

希望它有所帮助

    $("#clickme").click(function(){
      var first=  $("#first_element");
      var second=  $("#second_element");
    if(!$('.container').hasClass('red-green')){
      $('.container').addClass('red-green');    
       $("#first_element").remove();
       $("#second_element").after(first);
    }else {
       $('.container').removeClass('red-green');
       $("#second_element").remove();
       $("#first_element").after(second);
    }

    })

 #first_element{
     background-color: red;
     width: 30px;
     height:30px;
     margin: 20px;
     border-radius: 50%;
     display: block;
    }


    #second_element{
    background-color: green;
    width: 30px;
     height:30px;
     margin: 20px;
     border-radius: 50%;
     display: block;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="container">
    <div id="first_element"></div>
    <div id="second_element"></div>
    </div>
    <button id="clickme">Click Me</button>

在按钮单击上移动元素在另一个元素的顶部

4 个答案: