Salve a tutti,
sto cercando una soluzione per far scorrere un icona PNG su un asse orizzontale in un div (WRAP) contenitore, la dimensione di questo è l'asse intera, il 100% e alta 85px, il file che deve scorrere da sx a destra, un PNG con width 210px e height 45px
Vorrei che iniziasse a scorrere al caricamento del DOM.
Attualmente scorre al passaggio del mouse e solo per la lunghezza del PNG, come potrete vedere dal codice che posto sotto.
Potete darmi una mano e spiegarmi come fare? il toggle non mi consente di dare dimensioni di scostamento, non sapre cosa studiare.
Ringrazio a chi volesse darmi una mano.
Il CSS
<style>
.wrap{
top: 17%;
padding-top: 0px;
float: center;
position: fixed;
margin-top: -10px;
padding: 0px;
left: 2%;
margin-left: 0px;
width: 100%px;
height: 85px;
z-index: 900;
border: 1px solid #666;
}
#voce {
top: 17%;
padding-top: 0px;
float: center;
position: fixed;
margin: 0px;
padding: 0px;
left: 2%;
list-style: none;
margin-left: -169px;
width: 210px;
height: 45px;
font-size:16px;
z-index: 0;
background: url("../assets/img/search.png");
}
#voce:hover {
cursor: pointer;
margin-left: -50px;
}
</style>
HTML
<body style="hight: 100%; top: 50px;">
<div class="wrap">
<a href="#" id="voce" class="btn btn-b-n navbar-toggle-box-collapse d-none d-md-block"
data-toggle="collapse"
data-target="#navbarTogglerDemo01"
aria-expanded="false">
</a>
</div>
</body>
JQUERY
<script type="text/javascript">
$(document).ready(function() {
$(".wrap").mouseover(function() {
$( ".voce" ).toggle('slide');
});
});
</script>