-1

画面の途中にある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;
}

前もって感謝します

4

1 に答える 1

2 
.facebook-sw {
position: relative
}

.wrapper {
overflow: hidden;
}

デモ-http://jsfiddle.net/53bSe/1/

于 2012-11-22T07:10:03.750 に答える