jquery动画小跳跃

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

$("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>

来源

2015-05-31 Manuel Garcia

您需要及时更新您的标志在一个div，然后动画marginTop

检查这个fiddle，你可以改变DIV的HIGHT和宽度，使其漂浮的权利。

HTML：

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

来源

2015-05-31 08:35:21

有了您的解决方案，我可以移动第一下来之前，但它的相反的顺序，先上后下，我不能这样做：S –

好吧，我很愚蠢，与顶尖-50解决，谢谢你！ –

尝试设置spanposition: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>

来源

2015-05-31 08:53:04 guest271314

我宁愿不使用职位，所以我的第一个解决方案是最好的选择，无论如何感谢您的帮助！ –

jquery动画小跳跃

回答

相关问题