だから私はここにこのアニメーションを持っています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>
事前に大きな感謝