jquery圖像繼續移動

Question

我有4個圖像設置我想要圖像3和4下滑時，我點擊其中一個圖像。我想要一個div來自他們。對不起，我必須承認我是新來的，所以很抱歉，如果這是一個愚蠢的問題，但我已經嘗試了幾個小時，無法弄清楚。任何幫助將非常感激。

圖1和圖2

圖像3圖像4

當我點擊圖像1我的所有圖像移動到沒曾想位置。當我點擊圖片2時，一切都按我想要的那樣工作（圖片3和4向下滑動，我的div從圖片1和2下來）。圖像3也能正常工作。當我點擊圖片4時，除圖片4之外，所有圖片均正確移動，並移動到奇怪的位置。

這裏是我的CSS：

.image1{position:relative;top:-10px;left:-10px;margin:10px;} 
.image2{position:relative;top:-10px;left:25%;margin:10px;} 
.image3{position:relative;top:0px;left:-10px;margin:10px;} 
.image4{position:relative;top:0px;left:25%;margin:10px;} 

body{left:20%;width:60%;height:110%;padding:10px; 
    background-color:white;position:absolute; 
    margin:0px;opacity:0.9;filter:alpha(opacity=90); 
     /* For IE8 and earlier */-webkit-box-shadow: 6px 6px 50px 5px rgba(0, 0, 0, .5); 
    box-shadow: 6px 6px 50px 5px rgba(0, 0, 0, .5); 
    border-radius:4px; 
    background-color:#0033ff;} 

#panel,#panel2,#panel3,#panel4{ 
display:none;padding:400px;margin:auto;} 

#panel,#flip,#panel2,#panel3,#panel4,#flip2,#flip3,#flip4{ 
padding:5px;text-align:center;background-color:#e5eecc; 
border:solid 1px #c3c3c3;} 

這裏是我的HTML

`enter code here`<img src = "pics/dog.jpg" id="flip" class ="image1"/> 
<div id="panel">Hello world! test one</div> 

<img src = "pics/dog.jpg" id="flip2" class ="image2"/> 
<div id="panel2">Hello world! test two</div> 

<div id="panel3">Hello world! test three</div> 
<img src = "pics/dog.jpg" id="flip3" class ="image3"/> 

<div id="panel4">Hello world! test four</div> 
<img src = "pics/dog.jpg" id="flip4" class ="image4" /> 

這裏是我的腳本：

enter code here 

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 

<script> 
$(document).ready(function(){ 
    $("#flip").click(function(){ 
    $("#panel").slideToggle("slow"); 
    }); 
}); 
</script> 
    <script> 
$(document).ready(function(){ 
    $("#flip2").click(function(){ 
    $("#panel2").slideToggle("slow"); 
    }); 
}); 
</script> 
<script> 
$(document).ready(function(){ 
    $("#flip3").click(function(){ 
    $("#panel3").slideToggle("slow"); 
    }); 
}); 
</script> 
<script> 
$(document).ready(function(){ 
    $("#flip4").click(function(){ 
    $("#panel4").slideToggle("slow"); 
    }); 
}); 
</script> 

Answer 1

在第一您只能使用一個腳本標記和一個ready()。我認爲你的問題在你的CSS中。如果我正確理解問題，這裏是JSFiddle中的解決方案。