Slide element inside a div depending of the mouse entry position

Question

I would like to slide-in an element inside a div, but the sliding position should vary.

<div class="block">
    <div class="hover">…</div>
</div>

If the user enters the div from left the element should slide from left, if from right the element should slide in from right, same for the other sides.

Also for top/bottom, I will require to save to a variable, the side from which the user entered the div and trigger a function depending on the value of the variable.

How can I determine the direction/position? I'm using the jQuery libraray, but plain JavaScript is also acceptable.

are you attempting to move 'hover' in 'block' or is 'block' the container for 'hover' and you are moving an element in hover. Also, is the sliding element attached to the mouse move event? or once you hover it sets an animation in motion and you stopping your mouse will not effect the outcome. — rlemon, Jul 28 '11 at 13:03

Abraham · Answer 1 · 2011-07-29T11:48:32.693

Basically, what you would have to do is use jQuery's mouseover and get the clientX and clientY from the event object. Then use that info in conjunction with offset(), height(), and width() to determine which side of the <div> they're coming from. Example:

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title></title>
</head>
  <body>
  <div id="box" style="width:200px;height:200px;background:red;position:absolute;top:100px;left:100px;"><div id="cover" style="position:absolute;background:blue;width:0;height:0;overflow:hidden;z-index:50;"></div></div>

    <script>
$(function(){
  var $box = $('#box').mouseenter(function(event){
    // coming from the top
    if (Math.abs(event.pageY - offset.top) < 10) {
      $cover.css('width',width).animate({
        height:height
      })
    }
    //coming from the left
    else if (Math.abs(event.pageX - offset.left) < 10) {
      $cover.css('height',height).animate({
        width:width
      })
    }
    //coming from the bottom
    else if (Math.abs(event.pageY - (offset.top + height)) < 10) {
      $cover.css({
        width:width,
        top:'auto',
        bottom:0
      }).animate({
        height:height
      })
    }
    //coming from the right
    else {
      $cover.css({
        height:height,
        left:'auto',
        right:0
      }).animate({
        width:width
      })
    }
  }).mouseleave(function(){
    // reset it
    $cover.css({
      width:0,
      height:0,
      bottom:'auto',
      right:'auto',
      left:'auto',
      top:'auto'
    })
      }), $cover = $('#cover'), offset = $box.offset(), width = $box.width(), height = $box.height()
})
</script>
</body>
</html>

(Sorry for the wait ;)

yes. that would be very usefull, thanks Abraham! i want to do something similar like on this site: http://lippincott.com/work/ if that helps you imagine what i want to do — blackhandr, Jul 28 '11 at 14:09
OK, I see. When you mouse over a tile, the overlay slides in from whichever direction you came from. I'm busy right now but probably in an hour I will be free. I will post an example on jsFiddle, OK? — Abraham, Jul 28 '11 at 14:20
Sorry, didn't have time to finish it earlier. Will post this evening. — Abraham, Jul 28 '11 at 19:29

rlemon · Answer 2 · 2011-07-28T17:51:50.883

0

Here is my updated sample, it is untested - however it should work.

$(".block").mouseenter(function(event){
  if(!$(".hover").is(":animated")){
        if(event.pageX > ($(".block").position().left + ($(".block").width()/2)))
        {
              $(".hover").css("left", "-100px");
        } else {
              $(".hover").css("left", "200px");
        {
        $(".hover").animate({ left : 0 },300);
  }
});

css

.block {
  position: relative;
  height: 100px;
  width: 100px;
  overflow: hidden;
  background-color: #fff;
}
.block .hover {
  position: absolute;
  left: -100px;
  height: 100px;
  width: 100px;
  background-color: #00f;
}

edited Jul 28 '11 at 17:51

answered Jul 28 '11 at 13:08

rlemon

17,518
14
92
123

Note, this will update from 'left' to 'right' if the mouse creeps past the center position. This will only be effective if you run an animation on hover and not tie the slide to the mouse position within the container. otherwise you'll get half way into the slide and it will think you are restarting from the other end. – rlemon Jul 28 '11 at 13:09
i see. thank you. i want to start the animation right away when the user entered the div. basically i want to do something like on this site: http://lippincott.com/work/ hover over the boxes – blackhandr Jul 28 '11 at 14:10
I would also change the _hover_ event to a _mouseenter_ and _mouseleave_ events. – rlemon Jul 28 '11 at 17:51

Slide element inside a div depending of the mouse entry position

2 Answers2