0

所以我在这里有这个动画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>

非常感谢提前

4

4 回答 4

0

试试这个：（工作小提琴可以在这里找到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()方法接受两个函数，第一个是 for mouseover，第二个是 for mouseout。

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

编辑

为了防止这种闪烁/活泼的行为，您需要更改为 div 设置动画的方式。您需要为 div 定义打开和关闭位置并使用它，而不是更改左侧或右侧位置。

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

于 2012-11-22T08:08:51.593 回答
0

我建议您像这样使用 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);
于 2012-11-22T08:09:51.423 回答
0

试试这个方法

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

);

于 2012-11-22T08:13:32.007 回答
0 
<!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>

我希望对你有用...

于 2012-11-22T08:19:12.947 回答