Home/ Questions/Q 8863541
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T16:00:19+00:00

So I have this animation here http://kevingilbertportfolio.com/help/index.html and I am trying to get it

  • 0

So I have this animation here http://kevingilbertportfolio.com/help/index.html and I am trying to get it to move smoothly. It is supposed to whenever you mouse over it come out and when u bring the mouse cursor out it goes back in.. as you can see it is very very very messy.

HTML + CSS + jQuery

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>  
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  <style type='text/css'>
    @charset "utf-8";
/* CSS Document */
* {
    margin:0;
    padding:0;
}

body {
    background-color:#636363;
}

.facebook-sw {
    margin-top:120px;
    float:right;
    margin-right:-300px;
    position: relative;
}

.fb-icon {
    float:left;
    margin-right:14px;
}

.fb-like-box {
    float:left;
}

.wrapper {overflow: hidden;}
  </style>
<script type='text/javascript'>//<![CDATA[ 
$(document).ready(function() {
    $('.facebook-sw').hover(function() {
        $('.facebook-sw').animate({
            left: '-=300'
        }, 900, function() {
            // Animation complete.

        });
    });
});
$(document).ready(function() {
    $('.facebook-sw').mouseout(function() {
        $('.facebook-sw').animate({
            left: '+=300'
        }, 900, function() {
            // Animation complete.

        });
    });
});
//]]>  
</script>
</head>
<body>    
    <div class="wrapper">
        <div class="facebook-sw">
            <img class="fb-icon" src="image/fb-icon.PNG" width="110" height="113" alt="">
            <img class="fb-like-box" src="image/example.JPG" height="544" width="292" alt="">
        </div>
    </div> 
</body>
</html>

HUGE thanks in advance

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this: (working fiddle can be found here http://jsfiddle.net/c9w3n/3/)

    $(document).ready(function() {
    $('.facebook-sw').hover(
        function() {
            $('.facebook-sw').stop(true, true).animate({
                left: '-=300'
            }, 900, function() { });
        }, function() {
            $('.facebook-sw').stop(true, true).animate({
                left: '+=300'
            }, 900, function() { });
        }
    );
});

    The .hover() method in jQuery takes in two functions in which case the first one is for mouseover and the second one is for mouseout.

    Also, the issue you are having is related to animation queues, every time the mouse moves in or out, the entire animations keep getting added to the element, to prevent this, you can use .stop(). You can check the documentation for details, but the two parameters true, true that I have passed in basically say that cancel any other animations on that element and if any animation is currently running – move the element immediately to the end of the animation.

    Edit

    To prevent that flickering / snappy behavior you need to change the way you are animating the div. Instead of changing the left or right positioning, you need define an open and a close position for the div and use that.

    Working fiddle for the same here: http://jsfiddle.net/c9w3n/7/

    • 0