Animating span tag inside li tag
I want to create a new effect for a hover link. I have an idea, but I cannot make the animation. Here's a sketch:
- The border in red shows the entire item that is likely to have to be a list item.
- Borders in yellow represent two separate elements. The yellow bit rule will remain stationary where the left yellow bit moves to the left.
- When opening the border white should have the word "show" in it (which is hidden at the beginning).
This is how it should look at the end:
Here's an awkward thing that reproduces what I mean with the div: http://jsfiddle.net/t5pcjtdo/
I just can't get it to work with plain text (inside ul-tag and li-tag). Basically it should be something like this:
<li>
<span>.about(</span>
<span class="hidden">show</span>
<span>)</span>
</li>
And how the hell am I sure the right bracket is in place while the rest move 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;
}
source to share
You will find it here: 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 above example to understand it better.
When it comes to CSS, it's just a question of changing ul
, li
, span
to have the same default CSS properties div
.
If instead of div
doing .container
a ul
, we don't need to change anything.
If we do .wrapper
a ul
, we have to do this:
.wrapper {
list-style:none;
display:inline-block;
}
If we do box-left
, box-middle
and box-right
spaces, we have to do so (and remove the whites' tempo).
.box-left, .box-middle, .box-right {
vertical-align:top;
line-height:30px;
}
As an added bonus, here's an example with multiple elements li
and spacing based .box-middle
in each li
: http://jsfiddle.net/t5pcjtdo/10/
EDIT
IE decided to do what it does best (screw it up). You need to add this to your CSS for it to work in IE.
.box-left {
white-space:nowrap;
}
source to share
The solution below will automatically parse the following HTML so you don't need to add additional elements.
<ul>
<li>.about(show)
<li>.projects(show)
<li>.contact(show)
</ul>
It also automatically positions the elements so they won't overlap each other and you don't have to hard-code the width.
Excerpt:
$('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>
source to share
Looks a little strange, but I hope this 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;
}
source to share