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動畫小跳躍

回答

相關問題