Анимация тега span внутри тега li

Question

Я хочу создать новый эффект для ссылки для зависания. У меня есть идея, но я не могу сделать анимацию. Вот набросок:

• красный граница показывает весь элемент, который, вероятно, будет быть элементом списка.
• желтый бордюры обозначают два отдельных предмета. правый желтый бит будет оставаться неподвижным там, где левый желтый бит перемещается влево.
• Хотя открытия, белый граница должна иметь слово «шоу» в его (который скрыт в самом начале).

Вот как это должно нужно смотреть в конце:

Вот является неудобным, которая воспроизводит то, что я имею в виду с DIV: http://jsfiddle.net/t5pcjtdo/

Я просто не может заставить его работать с обычным текстом (внутри ul-tag и li-tag). В основном это нужно быть что-то вроде этого:

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

И, как, черт возьми, я убедиться, что правая скобка стоит на месте, в то время как остальные движется влево?

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; 
} 

Answer 1

Здесь вы идете: http://jsfiddle.net/t5pcjtdo/8/

Что касается предотвращения перемещения правого кронштейна, вы хотите переместить на левую сторону вместо середины. Посмотрите пример выше, чтобы лучше понять его.

Когда дело доходит до CSS, это просто вопрос изменения ul, li, span иметь те же CSS по умолчанию свойства div.

Если мы сделаем .container a ul вместо div, ничего нам не нужно ничего менять.

Если мы .wrapper в ul, мы должны сделать это:

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

Если мы box-left, box-middle и box-right охватывает мы должны это сделать (и удалить белый темп).

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

В качестве дополнительного бонуса, вот пример с несколькими li элементов, и расстояние между ними на основе .box-middle в каждом li: http://jsfiddle.net/t5pcjtdo/10/

EDIT

IE решил сделать то, что он делает лучше всего (винт). Необходимо добавить это в CSS, чтобы он работал в IE.

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

Answer 2

Выглядит немного странно, но я надеюсь, что это то, что вы хотите

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; 
} 

Answer 3

Решение ниже автоматически обрабатывает следующий HTML-код, поэтому вам не нужно добавлять дополнительные элементы.

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

Он также автоматически пространства детали, поэтому они не будут прикрывать друг друга, и вам не нужно жестко прописать ширину.

Отрывок:

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