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
<!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 に答える
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

これを試してください:(動作するフィドルはここにあります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()メソッドは 2 つの関数を受け取ります。この場合、最初の関数は formouseoverで、2 番目の関数は formouseoutです。

また、発生している問題はアニメーション キューに関連しています。マウスが移動するたびに、アニメーション全体が要素に追加され続けます。これを防ぐには、.stop(). 詳細についてはドキュメントを確認できますが、true, true渡した 2 つのパラメーターは、基本的に、その要素の他のアニメーションをキャンセルし、現在実行中のアニメーションがある場合は、要素をすぐにアニメーションの最後に移動することを示しています。

編集

そのちらつき/きびきびした動作を防ぐには、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 に答える