Question

我想在按钮点击上设置一个对象的动画，并且还想绘制一条垂直线。动画它的工作正常..但是我面临绘图线的问题我怎样才能在jQuery中执行此任何人建议我？

<script>
  $("#clickaroo").click(
    function() {
      $("#movaroo").animate(
        { top: "+=234px" }, 1000);
    }
  );
</script>

Answer 1

你可以做的是div只有border 1px，这样它看起来像一条线，并使用CSS在正确的位置定位它。

当DOM准备就绪时，只需使用$(selector).hide();函数隐藏它，当你想让它出现时，可以使用jquery的sildeDown()函数来获得效果。

所以代码可以是这样的

<强> HTML

<button id="clickaroo">click me</button>
<div id="hiddenDiv">

CSS （您可能需要根据需要更改CSS以正确定位“行”）

#hiddenDiv{
    margin:0 50%;
    border-right:1px solid black;
    position:absolute;
    height:234px;
    top:0px;
}

<强> JS

$(document).on('ready', function(){
$('#hiddenDiv').hide();
});  

$("#clickaroo").click(
    function() {
      $("#movaroo").animate(
        { top: "+=234px" }, 1000);
        $('#hiddenDiv').slideDown(1000);
       /* $('#hiddenDiv').slideToggle(1000); you can also use this*/
    }
  );

Answer 2

这是一个如何做到的简单示例。请检查出来以获得一个想法。如果您遇到困难，则需要编辑帖子并提供有关您要执行的操作的更多信息。

http://jsfiddle.net/WhKbs/

<div id="line" style="width:0; height:0; border:1px solid #000000"></div>

$('#line').animate({height: 234}, 1000);

使用jquery绘制线动画垂直圆

2 个答案: