1

Based on this demo on CodePen, I have to achieve something similar, but only horizontally. My demo totally lacks the "easing" animation that the CodePen demo has.

I already have the hover effect working from the left (but it isn't smooth). Starting from the right, however, the content doesn't change. How can I have the content changed by moving the cursor horizontally from either side? 

 $("#da-thumbs li").hover(function () {
     $(this).find("div").show();
 }, function () {
     $(this).find("div").hide();
 });

 $('#da-thumbs li').mousemove(function (e) {
     var $this = $(this);
     $this.find("div").css({
         left: e.pageX - $this.position().left - 100
     });
 });
.da-thumbs {
    list-style: none;
    margin:20px;
    display:inline-block;
    overflow:hidden;
    width:400px;
    padding:0;
}
.da-thumbs li {
    width:200px;
    height:200px;
    background: #000;
    float: left;
    margin: 0px;
    position: relative;
    z-index: 0;
}
.da-thumbs li a {
    display: block;
    position: relative;
    text-decoration: none;
}
.da-thumbs li a div {
    display:none;
    position: absolute;
    background: #777;
    background: rgba(75, 75, 75, 0.7);
    width:200px;
    height:200px;
    z-index: 3;
}
.da-thumbs li a div span {
    display: block;
    padding: 10px 0;
    margin: 40px 20px 20px 20px;
    text-transform: uppercase;
    font-weight: normal;
    color: #fff;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 -10px 0 rgba(255, 255, 255, 0.3);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="da-thumbs" class="da-thumbs">
    <li> <a href="">
      <div><span>POD ONE</span></div>
    </a>

    </li>
    <li><a href="">
      <div><span>POD TWO</span></div>
    </a>

    </li>
</ul>
TylerH
  • 20,799
  • 66
  • 75
  • 101
DDfrontenderLover
  • 470
  • 1
  • 6
  • 23
  • are you asking for advice on how to add the easing? – Dpeif Jan 26 '15 at 15:26
  • well, I don't think it will solve the problem. clearly my demo compare to the codepen one doesn't have the fluidity and the doesn't change the content properly. – DDfrontenderLover Jan 26 '15 at 15:30
  • WHat is your question? You haven't provided a proper problem statement or a proper question – charlietfl Jan 26 '15 at 15:31
  • @Dpeif is pretty clear that on hover the boxes aren't changing the text(copy) – DDfrontenderLover Jan 26 '15 at 15:31
  • - I have to achieve something like this but only horizontally, also by moving the cursor the content should change once over it. – DDfrontenderLover Jan 26 '15 at 15:32
  • @charlietfl well, I gave 2 demos, I think is quite enough right? On my fiddle is clear the diversity and the problem – DDfrontenderLover Jan 26 '15 at 15:34
  • So we have to go to 2 other sites to figure out what your issue is? that's not how things work here – charlietfl Jan 26 '15 at 15:36
  • you *have* achieved something like the demo, only horizontally, and the content changes for me as i move the cursor. it doesn't work perfectly, but i'm not sure what specific problem you need help with. try picking out specific things that aren't working. I see Pod One and Pod Two change when moving left to right, but not right to left. that's one issue. then there's the lack of easing. that's a different issue though. try editing your question to list the features you need to work, and what you've tried so far. – Dpeif Jan 26 '15 at 15:38
  • @charlietfl as said above my fiddle lack of easing and the content doesn't change. Its pretty clear the question. Sorry if I didn't explain myself properly. – DDfrontenderLover Jan 26 '15 at 15:39
  • SO where are the problems implementing easing? Or showing content? – charlietfl Jan 26 '15 at 15:43
  • well, I guess the showing content properly its more important, I'd like to have the illusion that by moving the cursor it changes without a flicker or a jump, – DDfrontenderLover Jan 26 '15 at 15:46
  • so what have you done to try to show content? We aren't here to simply build this for you – charlietfl Jan 26 '15 at 15:47
  • @charlietfl what I've done is on my demo, I can't make it working as I wanted. – DDfrontenderLover Jan 26 '15 at 15:49
  • You could just remove the top and bottom options and make the left option default: http://codepen.io/anon/pen/MYozdx – Pete Jan 26 '15 at 15:50
  • The Codepen demo only moves the hover display when switching to a new element. Your demo, on the other hand, is squishing the hover display into the bounds and then popping it into the next rather than 'sliding' it into the next. – Wild Beard Jan 26 '15 at 16:14
  • You set here a new left position on hover. The behaviour of the example on Codepen works like that: when you hover a link, it saves where the hovering began, then appears from that part (left, right, top or bottom) and disappears to the edge your mouse was last seen. Then, if you mouseover two links, that creates that effect of following, but that's just an illusion, the blocks are dependent to its parent. That's the logic! – flks Jan 26 '15 at 18:11

0 Answers0