Animación de un span-tag dentro de una etiqueta Li -- jquery campo con html campo con css camp Relacionados El problema

Animation of a span-tag inside an li-tag


3
vote

problema

Español

Quiero crear un nuevo efecto para un enlace para flotar. Tengo la idea lista, pero no puedo hacer la animación. Aquí hay un boceto:

ingrese la descripción de la imagen aquí

  • El rojo frontera muestra todo el elemento, que probablemente tendrá ser un elemento de lista.
  • El amarillo bordes indican dos artículos separados. La derecha Bit amarillo will estancia aún allí mientras el bit amarillo izquierdo se mueve a la izquierda.
  • mientras se abre, el borde blanco debería tener la palabra "mostrar" en Es (que está oculto al inicio).

Así es como debería necesitar mirar al final:

ingrese la descripción de la imagen aquí

Aquí hay un fiddly que reproduce lo que quiero decir con un div: http://jsfiddle.net/t5pcjtdo/

No puedo hacer que funcione con texto regular (dentro de una etiqueta UL y una etiqueta LI). Básicamente, necesitará ser algo así:

  <li>     <span>.about(</span>     <span class="hidden">show</span>     <span>)</span> </li>   

y, ¿cómo diablos me aseguro de que el soporte derecho se mantenga todavía, mientras el resto se mueve hacia la izquierda?

html :

  <div class="container">     <div class="wrapper">         <div class="box-left">.about(</div>         <div class="box-middle">show</div>         <div class="box-right">)</div>     </div>     <div class="text">     Hover over the red     </div> </div>   

jquery :

  var middle = $('.box-middle'); middle.css("width", "0");  $('.wrapper')     .mouseenter(function () {     $(middle).animate({         width: '60px'     }); })     .mouseleave(function () {     $(middle).animate({         width: '0'     }); });   

css :

  .wrapper > div {     float:left;     height: 35px;     color:white;     border: 1px solid black;     margin-right:1px;     font-size:24px }  .box-left {     width:80px; }  .box-right {     width: 20px; }  .box-left, .box-right {     background-color:red; }  .box-middle {     background-color:green;     overflow:hidden; }  .container{     width:100%;     background-color:pink; }  .text{  clear:left;    }   
Original en ingles

I want to create a new effect for a link to hover on. I've got the idea ready, but can't get the animation done. Here is a sketch:

enter image description here

  • The red border shows the whole item, which will probably have to be a list item.
  • The yellow borders indicate two separated items. The right yellow bit will stay still there as the left yellow bit moves to the left.
  • While opening, the white border should have the word "show" in it (which is hidden at the start).

This is how it should need to look in the end:

enter image description here

Here is a fiddly that reproduces what I mean with a div: http://jsfiddle.net/t5pcjtdo/

I just can't get it to work with regular text (inside a ul-tag and a li-tag). Basically it'll need to be something like this:

<li>     <span>.about(</span>     <span class="hidden">show</span>     <span>)</span> </li> 

AND, how the hell do I make sure the right bracket stands still, while the rest moves to the left?

HTML:

<div class="container">     <div class="wrapper">         <div class="box-left">.about(</div>         <div class="box-middle">show</div>         <div class="box-right">)</div>     </div>     <div class="text">     Hover over the red     </div> </div> 

jQuery:

var middle = $('.box-middle'); middle.css("width", "0");  $('.wrapper')     .mouseenter(function () {     $(middle).animate({         width: '60px'     }); })     .mouseleave(function () {     $(middle).animate({         width: '0'     }); }); 

CSS:

.wrapper > div {     float:left;     height: 35px;     color:white;     border: 1px solid black;     margin-right:1px;     font-size:24px }  .box-left {     width:80px; }  .box-right {     width: 20px; }  .box-left, .box-right {     background-color:red; }  .box-middle {     background-color:green;     overflow:hidden; }  .container{     width:100%;     background-color:pink; }  .text{  clear:left;    } 
        
 
 

Lista de respuestas

1
 
vote
vote
La mejor respuesta
 

Aquí vayas: http://jsfiddle.net/t5pcjtdo/8/

Cuando se trata de evitar que el soporte derecho se mueva, desea mover el lado izquierdo en lugar del medio. Echa un vistazo al ejemplo anterior para entenderlo mejor.

Cuando se trata de CSS, es solo una cuestión de cambiar ul , li , span Para tener las mismas propiedades de CSS predeterminadas de A div .

Si hacemos .container A ul En lugar de div6 , no necesitamos cambiar nada.

Si hacemos .wrapper A ul , tenemos que hacer esto:

  .wrapper {     list-style:none;     display:inline-block; }   

Si hacemos li0 , li1111 , y li2 Spans Tenemos que hacer esto (y eliminar el ritmo de los blancos).

  li3  

Como un bono adicional, aquí hay un ejemplo con múltiples elementos div14 , y espaciamiento basado en li5 en cada : http://jsfiddle.net/t5pcjtdo/10/

editar

es decir, decidió hacer lo que hace mejor (atornillar). Necesita agregar esto a la CSS para que funcione en IE.

  li7  
 

Here you go: http://jsfiddle.net/t5pcjtdo/8/

When it comes to preventing the right bracket from moving, you want to move the left side instead of the middle. Check out the example above to better understand it.

When it comes to CSS, it's just a matter of changing ul, li, span to have the same default CSS properties of a div.

If we make .container a ul instead of div, we don't need to change anything.

If we make .wrapper a ul, we have to do this:

.wrapper {     list-style:none;     display:inline-block; } 

If we make box-left, box-middle, and box-right spans we need to do this (and remove the whites pace).

.box-left, .box-middle, .box-right {     vertical-align:top;     line-height:30px; } 

As an extra bonus, here's an example with multiple li elements, and spacing based on .box-middle in each li: http://jsfiddle.net/t5pcjtdo/10/

EDIT

IE decided to do what it does best (screw up). Need to add this to the CSS to make it work in IE.

.box-left {     white-space:nowrap; } 
 
 
   
   
1
 
vote

La siguiente solución se manejará automáticamente el siguiente HTML, por lo que no necesita agregar los elementos adicionales.

  li8  

También espacia automáticamente los elementos, por lo que no se cubrirán mutuamente, y no necesita codificar los anchos.

SNIPPET:

  li9   
  span0 
  span1  
 

The solution below will automatically handle the following HTML, so you don't need to add the extra elements.

<ul>   <li>.about(show)   <li>.projects(show)   <li>.contact(show) </ul> 

It also automatically spaces the items, so they won't cover each other up, and you don't need to hard-code the widths.

Snippet:

$('li').each(function() {    var w1= $(this).width();    $(this).html($(this).html().replace(/\((.+)\)/,'(<span>$1</span>)'));    var w2= $(this).width();    $(this).css({      marginRight: (w1-w2)+5    });  });    $('li').mouseenter(function() {    var sp= $(this).find('span');    sp.css({width:'auto'});    var width= sp[0].clientWidth;    sp.css({      width: 0    });    sp.animate({      width: width    });    $(this).animate({      marginLeft: -width    });  }).mouseleave(function() {    var sp= $(this).find('span');    sp.animate({      width: 0    });    $(this).animate({      marginLeft: 0    });  });
li {    color: white;    font-weight: bold;    font: 18px verdana;    display: inline-block;    background: red;  }    li span {    width: 1px;    border-right: 1px solid black;    border-left: 1px solid black;    background: green;    display: inline-block;    overflow: hidden;    vertical-align: bottom;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <ul>    <li>.about(show)    <li>.projects(show)    <li>.contact(show)  </ul>
 
 
 
 
0
 
vote

parece poco extraño, pero espero que sea lo que quiere

Demo - http://jsfiddle.net/t5pcjtdo/9/

html

  span2  

css

  span3  
 

Looks little wierd, but i hope that is what you want

DEMO - http://jsfiddle.net/t5pcjtdo/9/

html

<div class="container">     <div class="wrapper">          <div class="box-right">)</div>          <div class="box-middle">show</div>         <div class="box-left">.about(</div>      </div>     <div class="text">     Hover over the red     </div> </div> 

CSS

.wrapper {width: 180px; float: left;}  .wrapper > div {      height: 35px;     color:white;     border: 1px solid black;     margin-right:1px;     font-size:24px;  } .box-left {     width:80px;     float: right; } .box-right {     width: 20px;     float: right; } .box-left, .box-right {     background-color:red; } .box-middle {     background-color:green;     overflow:hidden;     float: right; } .container{     width:100%;     background-color:pink; }  .text{  clear:left;    } 
 
 

Relacionados problema

0  Deshacerse del disco en el artículo de la lista  ( Getting rid of disc in list item ) 
Estoy desarrollando un sitio usando jquery, y jquery ui Tabs. Por alguna razón, mis pestañas (lista desordenada) están mostrando sus balas en todos los navega...

4  Cuerda continua que no se envuelve en TD  ( Continuous string not getting wrapped in td ) 
Cuando coloco una larga cadena continua en mi ancho fijo TD, no se está envuelto. La cadena aumenta el ancho de mi mesa. ¿Alguien puede ayudarme con esto? P...

303  ¿Por qué el ancho se colapsó en el elemento secundario del ancho porcentual en un padre absolutamente posicionado en Internet Explorer 7?  ( Why did the width collapse in the percentage width child element in an absolutel ) 
Tengo un double8 que contiene varios niños, uno de los cuales es un 99887776669 relativamente posicionado. Cuando uso un Form0 en el niño Form111111 , ...

76  Cómo romper la palabra después de un carácter especial como guiones (-)  ( How to break word after special character like hyphens ) 
Dado un CSS relativamente simple: div { width: 150px; } <div> 12333-2333-233-23339392-332332323 </div> ¿Cómo lo hago para que la cade...

142  ¿Cómo detectar cuál de las fuentes definidas se utilizó en una página web?  ( How to detect which one of the defined font was used in a web page ) 
Supongamos que tengo la siguiente regla de CSS en mi página: body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } ¿Cómo podría detec...

0  LazyWeb: necesita Javascript que elimina los elementos de LI basados ​​en la clase visitada de un elemento  ( Lazyweb need javascript that removes li elements based on visited class of a el ) 
Tengo esta página que tiene muchos datos que no necesito, ya que ya he hecho clic en él, pero se repite a menudo, así que tengo que buscar visualmente el azul...

5  Cómo alinear verticalmente una tabla en CSS  ( How to vertically align a table in css ) 
¿Cómo puedo alinear verticalmente una tabla en el centro de la pantalla con CSS? ...

1  Directrices para diseñar HTML para una fácil personalización CSS  ( Guidelines for designing html for easy css customization ) 
Estoy haciendo un proyecto SAAS, y queremos que cada cliente pueda cargar una página CSS para "su" sitio web. (Aunque en realidad, todos los sitios del client...

8  Desapareciendo bordes de células de mesa CSS en navegadores basados ​​en gecko  ( Disappearing css table cell borders in gecko based browsers ) 
Tengo una construcción de tabla HTML muy específica que parece revelar un error de gecko. Aquí hay una versión destilada del problema. Observe la siguiente ...

0  Imagen de fondo Blurs en Firefox3  ( Background image blurs in firefox3 ) 
Cuando uso la imagen en mi página HTML usando la propiedad de fondo. Los loks están bien en IE, pero se ve borroso en Firefox. Wat podría ser la posible soluc...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos