CODEWITHSUNDEEP
jquery
Manuel Garcia
Manuel Garcia

Reputation: 144

Animation little jump with jquery

My question is simple, I want to make a little animattion with jquery, it's a little jump, I have a icon at the top, and paragraph on the bottom, and the icon must go up and down, without the paragraph movement. I think it's using margin bottom +20% to up and clear it to down, but how i make the paragraph static. Here is a snippet to show it better.

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

Upvotes: 0

Views: 75

Answers (2)

guest271314
guest271314

Reputation: 1

Try setting span position:relative , calling .animate() with top:-20 argument

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

Upvotes: 1

Ajay Narain Mathur
Ajay Narain Mathur

Reputation: 5466

You need to keep your logo in a div and then animate marginTop

Check this fiddle , you can alter hight and width of div make it float right.

HTML:

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

Upvotes: 1

Related Questions