jQuery凌乱的动画答案

【问题标题】：jQuery Messy AnimationjQuery凌乱的动画
【发布时间】：2012-11-22 08:03:59
【问题描述】：

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

提前致谢

【问题讨论】：

标签： jquery css html animation

【解决方案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/

【讨论】：

已编辑答案，注释行弄乱了语法。还添加了现场小提琴。
但是现在说你在它里面突出显示它完美地出来然后如果你突出它它开始完美地回到它但是如果用户在它回到它的时候把他的鼠标光标放回它怎么办它吓坏了我该如何解决这个问题
@user1844077 好的，我已经添加了具有您想要的“平滑度”的新小提琴。

【解决方案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);

【讨论】：

【解决方案3】：

试试这个方法

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

);

【讨论】：

【解决方案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>

希望对你有用...

【讨论】：