CODEWITHSUNDEEP
jqueryhtmlcss
Jordec
Jordec

Reputation: 1562

Animation of a span-tag inside an li-tag

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

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

Upvotes: 3

Views: 1026

Answers (3)

Scott Rowell
Scott Rowell

Reputation: 1130

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

Upvotes: 1

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

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>

Upvotes: 1

you-rick
you-rick

Reputation: 185

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

Upvotes: 0

Related Questions