0

I've been trying to create an effect using jquery that when you run the mouse over a div, the whole body moves, leaving a trail along the points it passed. I created a function that enabled the whole body to move, but I couldn't find a way to leave the trail. I tried to use .clone(), but as I'm a beginner with jquery, I wasn't able to do it right. Could anyone help me with this issue. Here's the code I'm using to move the body:

<script type="text/javascript">
$(document).ready(function() {

$("div").mouseover(function() {
    $("body").animate({
        margin: 50,
    })      
});

$("div").mouseout(function() {
    $("body").animate({
        margin: 0,
    })
});      

});      
</script>

Thanks a lot!

lebolo
  • 2,120
  • 4
  • 29
  • 44
Bruno Barbosa
  • 165
  • 1
  • 2
  • 9
  • Whatever you're on, I want some! If I understand this correctly, that's some pretty trippy effect you're going for :P – technophobia Sep 03 '13 at 19:55

1 Answers1

0

Quite an interesting problem. I have coded the following: http://jsfiddle.net/3Pq8E/

Here I'm just adding the border and removing it - creating a trail.

$("div").mouseover(function() {
    $("div").animate({
    margin: 25,
    borderLeftWidth: "50px",
    borderTopWidth: "50px",
  }, 1500 );     
});

$("div").mouseout(function() {
    $("div").animate({
        margin: 0,
    borderLeftWidth: "2px",
    borderTopWidth: "2px",
    })
});
Gautam Bhutani
  • 395
  • 2
  • 12
  • I appreciate that, but it's not exactly what I was looking for. I actually need an effect that leaves a trail of all the elements within the body. – Bruno Barbosa Sep 04 '13 at 12:38
  • I understand that you require each element to have this animation once the user enters and leaves the body - check out the new version. I've updated the same to perform the same animation to each element in the body: http://jsfiddle.net/3Pq8E/1/ – Gautam Bhutani Sep 04 '13 at 22:08