jQuery动画，从一侧传入，从另一侧传入和传出对象.直线

jQuery animation, coming in from one side, passing and object and out the other. Straight lines

本文关键字：对象直线 jQuery 动画更新时间：2023-09-26

我在学习javaScript和jQuery的第一周，我正在尝试制作一些动画。

基本上，我想做的就是让这些箭头从屏幕外开始，从一侧进入，传球投掷目标，然后从屏幕的另一侧退出。

理想情况下，它将是一个发射，当它大约在屏幕上的3/4处时，下一个发射所有8个箭头。

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="jQuery.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script src="jQuery.js" type"text/javaScript"></script>
</head>
<body>
    <button class="clickme">
        Click Me
    </button>
    <span class="uparrow">
    </span>
    <span class="uparrow2">
    </span>
    <span class="downarrow">
    </span>
    <span class="downarrow2">
    </span>
    <span class="leftarrow">
    </span>
    <span class="leftarrow2">
    </span>
    <span class="rightarrow">
    </span>
    <span class="rightarrow2">
    </span>
    <div class="target">
        <img src="http://simpleicon.com/wp-content/uploads/target1.svg" alt="">
    </div>
    <div class="target2">
        <img src="http://simpleicon.com/wp-content/uploads/target1.svg" alt="">
    </div>
</body> 
</html>

CSS----------------所有箭头当前都放置在目标位置并隐藏。

.uparrow {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
    top: 23%;
    left: 23%;
    position: absolute;
    display: none;
}
.uparrow2 {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
    top: 63%;
    left: 63%;
    position: absolute;
    display: none;
}
.downarrow {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
    top: 23%;
    left: 23%;
    position: absolute;
    display: none;
}
.downarrow2 {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
    top: 63%;
    left: 63%;
    position: absolute;
    display: none;
}
.left arrow {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
    top: 65%;
    left: 63%;
    position: absolute;
    display: none;
}
.leftarrow2 {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
    top: 25%;
    left: 23%;
    position: absolute;
    display: none;
}
.rightarrow {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
    top: 25%;
    left: 23%;
    position: absolute;
    display: none;
}
.rightarrow2 {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
    top: 65%;
    left: 63%;
    position: absolute;
    display: none;
}
.target {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    position: absolute;
    top: 60%;
    left: 60%;
}
.target2 {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 20%;
    left: 20%;
}
img {
    width: 100%;
    height: 100%;
}

jQuery——我试过一些东西，但我不知所措，基本上是想让它在点击按钮时启动。我很困惑最初是我的CSS位置还是其他位置。

$(document).ready( function(){
$(".clickme").click( function() {
//end click function    
});
//end document
});

我该怎么做呢，只是直线，传球命中目标。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type"text/javaScript"></script>
<style type="text/css">
.uparrow { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; top: 23%; left: 23%; position: absolute; display: none; } .uparrow2 { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; top: 63%; left: 63%; position: absolute; display: none; } .downarrow { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; top: 23%; left: 23%; position: absolute; display: none; } .downarrow2 { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; top: 63%; left: 63%; position: absolute; display: none; } .left arrow { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent; top: 65%; left: 63%; position: absolute; display: none; } .leftarrow2 { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent; top: 25%; left: 23%; position: absolute; display: none; } .rightarrow { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent; top: 25%; left: 23%; position: absolute; display: none; } .rightarrow2 { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent; top: 65%; left: 63%; position: absolute; display: none; } .target { width: 200px; height: 200px; margin: 0 auto; position: absolute; top: 60%; left: 60%; } .target2 { width: 200px; height: 200px; position: absolute; top: 20%; left: 20%; }
</style>
</head>
<body>
    <button class="clickme">
        Click Me
    </button>
    <span class="uparrow">
    </span>
    <span class="uparrow2">
    </span>
    <span class="downarrow">
    </span>
    <span class="downarrow2">
    </span>
    <span class="leftarrow">
    </span>
    <span class="leftarrow2">
    </span>
    <span class="rightarrow">
    </span>
    <span class="rightarrow2">
    </span>
    <div class="target">
        me
    </div>
    <div class="target2">
        me
    </div>
<script type="text/JavaScript">
$(document).ready( function(){
$(".clickme").click( function() {
//end click function    
});
//end document
});
</script>
</body> 
</html>

您可以使用jQuery的animate。我在下面的jsFiddle中完成了第一个目标——我想这就是你的想法。

$(document).ready( function(){
$(".clickme").on( 'click', function() {
  $('.downarrow').show().animate({ bottom: -100 }, function() { 
    $(this).css({ display: 'none', bottom: "100%" });
  });
  $('.uparrow').show().animate({ top: -100 }, function() { 
    $(this).css({ display: 'none', top: "100%" });
  });
  $('.leftarrow').show().animate({ left: -100 }, function() { 
    $(this).css({ display: 'none', left: "100%" });
  });
  $('.rightarrow').show().animate({ right: -100 }, function() { 
    $(this).css({ display: 'none', right: "100%" });
  });
});
});

以下是jsFiddle：https://jsfiddle.net/7f0zmxzp/

我在你的CSS中更改了一些位置。

animate方法在屏幕上移动箭头，带有css()的回调方法在动画后重置箭头。