Question

所以我在这里有动画http://kevingilbertportfolio.com/help/index.html，我试图让它顺利移动。它应该是当你把鼠标放在它上面出来时，当你把鼠标光标移出来时它又回来了......你可以看到它非常非常混乱。

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>

非常感谢提前

Answer 1

试试这个:(可以在这里找到工作小提琴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() { });
        }
    );
});

jQuery中的.hover()方法有两个函数，第一个用于mouseover，第二个用于mouseout。

此外，您遇到的问题与动画队列有关，每次鼠标移入或移出时，整个动画都会不断添加到元素中，为防止这种情况发生，您可以使用.stop()。您可以查看文档以获取详细信息，但我传入的两个参数true, true基本上说取消该元素上的任何其他动画以及当前是否有动画 - 将元素立即移动到动画的结尾

修改

为了防止闪烁/快速行为，您需要更改动画div的方式。您无需更改左侧或右侧定位，而是需要为div定义一个打开位置和一个关闭位置并使用它。

这里的工作小提琴：http://jsfiddle.net/c9w3n/7/

Answer 2

我建议您使用hoverIntent（http://cherne.net/brian/resources/jquery.hoverIntent.html）插件，如下所示：

function mouseOn() {
    $('.facebook-sw').animate({'margin-right' : '0'}, 900);
}

function mouseOff() {
    $('.facebook-sw').animate({'margin-right' : '-300px'}, 900);
}

$('.facebook-sw').hoverIntent(mouseOn, mouseOff);

Answer 3

试试这种方式

 $(".facebook-sw").hover(
    function () {
       $(this).animate({
           left: '-=300'
         }, 900, function() {
        // Animation complete.
        });
    }, 
    function () {
       $(this).animate({
          left: '+=300'
        }, 900, function() {
        // Animation complete.
      });
    }

）;

Answer 4

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
       <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
    <title> Auto hide </title>
</head>
<body>
<style type="text/css">
<!--
    body
    {overflow:hidden;}
    .wrapper
    {position:absolute;right:-300px;}
-->
</style>
<script type="text/javascript">
    <!--
    $(document).ready(function(){

       $('.wrapper').hover(function(){
       $('.wrapper').stop().animate({'right':0},4000);}
       ,function(){$('.wrapper').stop().animate({'right':-300},4000);}
       );
    });
-->
</script>
    <div class="wrapper">
        <div class="facebook-sw">
            <img class="fb-icon" src="http://kevingilbertportfolio.com/help/image/fb-icon.PNG" width="110" height="113" alt="">
            <img class="fb-like-box" src="http://kevingilbertportfolio.com/help/image/example.JPG" height="544" width="292" alt="">
        </div>
    </div>
</body>
</html>

我希望能为你工作......

jQuery凌乱的动画

4 个答案: