jQuery凌亂動畫

所以我在這裏有這個動畫http://kevingilbertportfolio.com/help/index.html，我試圖讓它順利移動。它應該是每當你將鼠標懸停在它出來時，當你把鼠標光標移出時，它會回到..你可以看到它非常非常混亂。jQuery凌亂動畫

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>

提前巨大的感謝

來源

2012-11-22 kevingilbert100

試試這個：（工作小提琴可以在這裏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() { }); 
     } 
    ); 
});

的.hover()方法的jQuery有兩種功能，第一種功能是mouseover，第二種功能用於mouseout。

此外，您遇到的問題與動畫隊列有關，每當鼠標移入或移出時，整個動畫不斷添加到元素中，爲防止出現此問題，您可以使用.stop()。您可以查看文檔以獲取詳細信息，但我傳入的兩個參數true, true基本上都說取消該元素上的任何其他動畫，並且如果有任何動畫正在運行 - 請立即將該元素移動到動畫的結尾處。

編輯

爲了防止你需要改變你的動畫股利的方式，閃爍/活潑的行爲。您不需要改變左側或右側的位置，而需要爲div定義開放位置和關閉位置並使用它。

工作搗鼓同樣在這裏：http://jsfiddle.net/c9w3n/7/

來源

2012-11-22 08:08:51

Dreamweaver中給我一個錯誤在最後一行}）; – kevingilbert100

編輯答案，註釋行混亂了語法。還添加了現場小提琴。 –

但現在說你在裏面突出顯示它完美出來，然後如果你突出顯示它開始回到完美，但如果用戶把他的鼠標光標放回它，但它回到它的怪胎如何，我會修復這 – kevingilbert100

我建議你使用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-22 08:09:51 kapantzak

試試這種方式

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

）;

來源

2012-11-22 08:13:32

<!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-22 08:19:12

jQuery凌亂動畫

回答

相關問題