How to make a chain of elements p / p that moves infinitely to the left

Question

How to make a chain of elements p / p that moves infinitely to the left

Navigation

#1 by (0 votes)

-1

As I put in the title, does anyone have any idea how to do it? an example would be like this:

The html code I have made is the following:

<div id="cadenaEtiquetas">
 <p>Texto1</p>
 <p>Texto2</p>
 <p>Texto3</p>
 <p>Texto4</p>
 <p>Texto5</p>
 <p>Texto6</p>
 <p>Texto7</p>
 <p>Texto8</p>
 <p>Texto9</p>
 <p>Texto10</p>
 <p>Texto11</p>
 <p>Texto12</p>
 <p>Texto13</p>
 <p>Texto14</p>
 <p>Texto15</p>
 <p>Texto16</p>
</div>

as property css I put:

#cadenaEtiquetas p:nth-child(1){
margin-left:100%;
}

#cadenaEtiquetas p:{
margin-right:15px;
}

#cadenaEtiquetas{
width:1000px;
height:30px;
display:flex
overflow:hidden;
}

And the Jquery code is:

$('#cadenaEtiquetas p:first').animate({
    'margin-left':'-110%'
},30000);

var margen = $('#cadenaEtiquetas p:first').css('margin-left');

if(margen === '-110%'){
    $('#cadenaEtiquetas p:first').insertAfter('#cadenaEtiquetas p:last');
}

What I try to do with the code is that when the first

have -110% margin-left, the first

is placed at the end and so on, creating an infinite movement.

Does anyone know how to do it?

    $('#cadenaEtiquetas p:first').animate({
		'margin-left':'-110%'
	},30000);

	var margen = $('#cadenaEtiquetas p:first').css('margin-left');

	if(margen === '-110%'){
		$('#cadenaEtiquetas p:first').insertAfter('#cadenaEtiquetas p:last');
	}

    #cadenaEtiquetas p:nth-child(1){
    margin-left:100%;
    }

    #cadenaEtiquetas p:{
    margin-right:15px;
    }

    #cadenaEtiquetas{
    width:1000px;
    height:30px;
    display:flex
    overflow:hidden;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cadenaEtiquetas">
	 <p>Texto1</p>
	 <p>Texto2</p>
	 <p>Texto3</p>
	 <p>Texto4</p>
	 <p>Texto5</p>
	 <p>Texto6</p>
	 <p>Texto7</p>
	 <p>Texto8</p>
	 <p>Texto9</p>
	 <p>Texto10</p>
	 <p>Texto11</p>
	 <p>Texto12</p>
	 <p>Texto13</p>
	 <p>Texto14</p>
	 <p>Texto15</p>
	 <p>Texto16</p>
</div>

jquery html css

asked by Marvin Morales 21.11.2017 в 23:32

source

1 answer

problem with bringing array from different classes show image while processing a form with jquery

score 0 · Answer 1

The trick is in the display:inline-block; property that you must apply to the p element:

$('#cadenaEtiquetas p:first').animate({
		'margin-left':'-110%'
	},30000);

	var margen = $('#cadenaEtiquetas p:first').css('margin-left');

	while (margen == '-110%'){
		$('#cadenaEtiquetas p:first').insertAfter('#cadenaEtiquetas p:last');
	}

#cadenaEtiquetas p:nth-child(1){
    margin-left:100%;
}
#cadenaEtiquetas p{
    width:auto;
    border: 1px solid red; 
    display:inline-block;
    margin-right:15px;
    height:30px;
}

#cadenaEtiquetas{
    display:flex;
    overflow:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cadenaEtiquetas">
	 <p>Texto1</p>
	 <p>Texto2</p>
	 <p>Texto3</p>
	 <p>Texto4</p>
	 <p>Texto5</p>
	 <p>Texto6</p>
	 <p>Texto7</p>
	 <p>Texto8</p>
	 <p>Texto9</p>
	 <p>Texto10</p>
	 <p>Texto11</p>
	 <p>Texto12</p>
	 <p>Texto13</p>
	 <p>Texto14</p>
	 <p>Texto15</p>
	 <p>Texto16</p>
</div>