Up and down effect in a few seconds

Question

Up and down effect in a few seconds

Navigation

#1 by (1 votes)

1

Does anyone have any idea how I can go up and down? For example: Scroll down the icon for 5 seconds and in the sequence it goes up and a few seconds later it goes down and stay 5 seconds and climb again.

Picture:

#social {
 width:700px; /* edite se for incluir mais links */
 position: fixed;
 top: 0px;
 left: 700px;
}
#icones {
 position: absolute;
 z-index: -1;
 margin-top: -57px;
 transition: margin-top 0.5s;
 -moz-transition: margin-top 0.5s;
 -webkit-transition: margin-top 0.5s;
 -o-transition: margin-top 0.5s;
}
#icones:hover {
 margin-top: 0px;
}
#icones li {
 margin: 0px;
 margin-top: -60px;
 padding: 0px;
 display: inline;
 z-index: 3000;
}
#icones img {
 opacity: 0.4;
 -moz-opacity: 0.4;
 -webkit-opacity: 0.4;
 -o-opacity: 0.4;
 transition: opacity .5s;
 -moz-transition: opacity .5s;
 -webkit-transition: opacity .5s;
 -o-transition: opacity .5s;
}
#icones img:hover {
 opacity: 1.0;
 -moz-opacity: 1.0;
 -webkit-opacity: 1.0;
 -o-opacity: 1.0;
}

<div id='social'>
<div id='icones'><ul>
<li><a target="_blank" href='https://www.facebook.com/liguetaxioficial/'><img src='http://3.bp.blogspot.com/-QB4FB1v8Cj0/UTSmz9SfS5I/AAAAAAAADAQ/jjT_x1C_tPI/s1600/facebook.png' /></a></li>
<li><a target="_blank" href='https://twitter.com/ligue_taxi'><img src='http://4.bp.blogspot.com/--pmEEnGL4p4/UTSm05Kp7UI/AAAAAAAADAw/Y5N73wRbT-c/s1600/twitter.png' /></a></li>
<li><a target="_blank" href='https://www.youtube.com/channel/UCa_5VkCzb7RnzfR-DwdnFJA'><img src='http://4.bp.blogspot.com/-8RHhZ1c7fyg/UTSm1Nlmz_I/AAAAAAAADA4/XU1Kl8h0gpE/s1600/youtube.png' /></a></li>
<li><a target="_blank" href='https://plus.google.com/102651165974266913449'><img src='img/GMais.png' width="62" height="78" /></a></li>
<li><a target="_blank"href='https://liguetaxi.wordpress.com/'><img src='img/WPress.png'  width="62" height="78" /></a></li>
     </ul></div>
    </div>

html jquery css

asked by anonymous 20.01.2018 / 16:58

1 answer

Change icon structure in javascript HTTP Error 406 using Rest Delphi components with XML return

score 1 · Accepted Answer

You can use jQuery animate within a setInterval that will trigger the animation every 5 seconds ( 5000 ), alternating the margin-top of div . offset().top gives me the current position of the element relative to the top of the page.

Run the code below and see it working:

$(document).ready(function(){
   setInterval(function(){
      $("#icones").animate({marginTop: $("#icones").offset().top < 0 ? "0" : "-57" });
   },5000);
});

#social {
 width:700px; /* edite se for incluir mais links */
 position: fixed;
 top: 0px;
 /*left: 700px; comentado para o exemplo*/
}
#icones {
 position: absolute;
 z-index: -1;
 margin-top: -57px;
 transition: margin-top 0.5s;
 -moz-transition: margin-top 0.5s;
 -webkit-transition: margin-top 0.5s;
 -o-transition: margin-top 0.5s;
}
#icones:hover {
 margin-top: 0px;
}
#icones li {
 margin: 0px;
 margin-top: -60px;
 padding: 0px;
 display: inline;
 z-index: 3000;
}
#icones img {
 opacity: 0.4;
 -moz-opacity: 0.4;
 -webkit-opacity: 0.4;
 -o-opacity: 0.4;
 transition: opacity .5s;
 -moz-transition: opacity .5s;
 -webkit-transition: opacity .5s;
 -o-transition: opacity .5s;
}
#icones img:hover {
 opacity: 1.0;
 -moz-opacity: 1.0;
 -webkit-opacity: 1.0;
 -o-opacity: 1.0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid='social'><divid='icones'><ul><li><atarget="_blank" href='https://www.facebook.com/liguetaxioficial/'><img src='http://3.bp.blogspot.com/-QB4FB1v8Cj0/UTSmz9SfS5I/AAAAAAAADAQ/jjT_x1C_tPI/s1600/facebook.png' /></a></li>
         <li><a target="_blank" href='https://twitter.com/ligue_taxi'><img src='http://4.bp.blogspot.com/--pmEEnGL4p4/UTSm05Kp7UI/AAAAAAAADAw/Y5N73wRbT-c/s1600/twitter.png' /></a></li>
         <li><a target="_blank" href='https://www.youtube.com/channel/UCa_5VkCzb7RnzfR-DwdnFJA'><img src='http://4.bp.blogspot.com/-8RHhZ1c7fyg/UTSm1Nlmz_I/AAAAAAAADA4/XU1Kl8h0gpE/s1600/youtube.png' /></a></li>
         <li><a target="_blank" href='https://plus.google.com/102651165974266913449'><img src='img/GMais.png' width="62" height="78" /></a></li>
         <li><a target="_blank"href='https://liguetaxi.wordpress.com/'><img src='img/WPress.png'  width="62" height="78" /></a></li>
     </ul>
   </div>
</div>