Question

我的问题很简单，我想用jquery做一点动画，它有点跳跃，我顶部有一个图标，底部有一个段落，图标必须上下移动，没有段落运动。我认为它使用保证金底部+ 20％向上并向下清除它，但我如何使该段落静止。这是一个更好地展示它的片段。

$( "span" ).animate({
    marginBottom: "5%",
  }, 1500 );

div {
    margin-top: 10%;
}
span {
    float : right;
    margin-right: 20%;
}
p {
    clear: both;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <span><i class="fa fa-heart-o"></i></span>
    <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</p>
</div>

Answer 1

您需要将徽标保存在div中，然后设置marginTop

的动画

选中此fiddle，您可以更改div的高度和宽度，使其向右浮动。

HTML：

<div id="logo"><span><i class="fa fa-heart-o"></i></span></div>

Answer 2

尝试设置position:relative .animate()，使用top:-20参数调用$( "span" ).animate({ // set `top` animation in `px` units here, // e.g.; `-20` top: "-20", }, 1500 );

div {
    margin-top: 10%;
}
span {
    position: relative;
    float : right;
    margin-right: 20%;
}
p {
    clear: both;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <span><i class="fa fa-heart-o"></i></span>
    <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</p>
</div>

array_map()

用jquery动画小跳

2 个答案: