Question

我有一个div在屏幕中间，当你点击一个按钮时它应该移出。我在这里发布了我的脚本http://jsfiddle.net/53bSe/，当我按下按钮时它似乎无法正常工作。在jsfiddle中它没有正确显示它。它应该看起来像http://i.imgur.com/8DBzz.jpg，然后当按下灰色按钮时，右边的内容应该动画显示。

我的HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="style.css">
<title>Facebook and Twitter Sliding Like and Follow</title>
</head>

<body>
<script>
$('#test').click(function() {
  $('.facebook-sw').animate({
    left: '+=300'
  }, 5000, function() {
    // Animation complete.
  });
});
</script>
    <div class="wrapper">
        <p id="test"></p>
        <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>

我的CSS

@charset "utf-8";
/* CSS Document */
* {
    margin:0;
    padding:0;
}

body {
    background-color:#636363;
}

.facebook-sw {
    margin-top:120px;
    float:right;
    margin-right:-300px;
}

.fb-icon {
    float:left;
    margin-right:14px;
}

.fb-like-box {
    float:left;
}

#test {
    float:left;
    width:100px;
    height:50px;
    background-color:#CCC;
    margin-top:100px;
    margin-left:50px;
    display:block;
}

提前致谢

Answer 1

.facebook-sw {
position: relative
}

.wrapper {
overflow: hidden;
}

演示 - http://jsfiddle.net/53bSe/1/

我的jQuery动画不起作用

1 个答案: