3

I am trying to implement a Jquery Hover function on my Company Logo. I want to achieve this :

Hover Effect using Jquery

However, I had achieved THIS

I used the following logic : 

$(".m1").hover(function() {
        dir = !dir;
        r = dir? -50 : 0;
        t = dir? 50 : 0;

        $(".slide").stop().animate({left: r+'px'}, 300);

    });

You can check my JS Fiddle here : http://jsfiddle.net/Jiteen/xZ6Hv/ Any sort of Help or Suggestion is Appreciated.

Jiteen
  • 429
  • 2
  • 6
  • 23

4 Answers4

3

How about the below as a starting point? No need for JS!

Demo Fiddle

HTML

<div>
    <div href="#" class="word" data-text="edia">M</div>
    <div href="#" class="word" data-text="antra">M</div>
</div>

CSS

.word {
    display:inline-block;
    font-size:1em;
    line-height:1;
    position:relative;
    font-size:50px;
}
.word:first-child {
    color:orange;
}
.word:last-child {
    color:grey;
}
.word:after {
    content:attr(text);
    position:relative;
    display:inline-block;
    overflow:hidden;
    max-width:0;
    color:black;
    font-size:20px;
    transition:max-width .5s ease-in;
}
div:hover .word:after {
    max-width:40px;
}
SW4
  • 69,876
  • 20
  • 132
  • 137
  • This is really neat!! – Simo Mafuxwana Apr 22 '14 at 14:51
  • 2
    A small correction - not to hard code width - it's better to use `max-width` property. Read more http://stackoverflow.com/questions/3508605/css-transition-height-0-to-height-auto – Kiril Apr 22 '14 at 14:51
  • @Kiril - you're correct, I had it set to 100% not a px value, I'll update, thanks. Otherwise there isnt really a diff between max-width and width as long as auto isnt one of the values with the exception a less exact value can be used – SW4 Apr 22 '14 at 14:55
  • Using `max-width` in my jsFiddle ( http://jsfiddle.net/Y9pS7/ ) avoids jumping as the width changes smoothly. – Kiril Apr 22 '14 at 15:00
1

You can achieve this by using a structure like this:

<div class="logo">
    <div class="m1">M</div>
    <div class="m3">aaa</div>
    <div class="m2">M</div>
    <div class="m4">aaa</div>
</div>

And animate it by changing the width of .m3 and .m4

jsFiddle

RobinvdA
  • 1,313
  • 2
  • 13
  • 28
1

This is what i would do: http://jsfiddle.net/A6vYy/.

Do note though, that if you're using images instead of divs you can skip some of the CSS.

JS

$(document).ready(function () {
    $(".logo").on("mouseenter", function () {
        $(this).find(".hidden").animate({width: "50px"}); 
    }).on("mouseleave", function () {
        $(this).find(".hidden").animate({width: "0px"});
    });
});

HTML

<div class="logo">
    <div class="part">M</div><div class="hidden">edia</div><div class="part">M</div><div class="hidden">antra</div>
</div>

CSS

.part, .hidden {
    width: 50px;
    height: 50px;
    background: red;
    display: inline-block;
    font-size: 24px;
    text-align: center;
    vertical-align: top;
}

.hidden {
    width: 0px;
    overflow: hidden;
}
Smurker
  • 714
  • 6
  • 17
1

Try this out : 

   <div class="media">
        <span class="big">M</span>edia
    </div>
    <div class="mantra">
        <span class="big">M</span>antra
    </div>

Css:

.media,.mantra{

    width:28px;
    overflow: hidden;
    float:left;
    margin-left:2px;
   -webkit-transition: 0.3s linear;
   -moz-transition: 0.3s linear;
   -ms-transition: 0.3s linear;
   -o-transition: 0.3s linear;
   transition: 0.3s linear;
    cursor: pointer;

}

.media:hover{
    display: inline-block;
    height:60px;
    width:60px;
    float:left;
   -webkit-transition: 0.3s linear;
   -moz-transition: 0.3s linear;
   -ms-transition: 0.3s linear;
   -o-transition: 0.3s linear;
   transition: 0.3s linear;
}

.mantra:hover{
    display: inline-block;
    height:60px;
    width:60px;
    float:left;
}


.big{
font-size: 2em;
 color: #ff8800;

}

Working Demo :http://jsfiddle.net/Jiteen/xZ6Hv/

undefinedtoken
  • 921
  • 1
  • 8
  • 26