2016-08-23 5 views
0

divのすべての要素を上に移動するボタンを中央で押すようにしようとしています。JQueryのクリックメソッドが機能しない

$(document).ready(function() { 
 
    $("#imgs").click(function() { 
 
    $("#start").animate({ 
 
     bottom: "+=250px" 
 
    }, "slow"); 
 
    }); 
 
});
#imgs { 
 
    display: block; 
 
    margin: 0 auto; 
 
    opacity: 1.0; 
 
    filter: alpha(opacity=100); 
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -ms-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
    bottom: 0px; 
 
} 
 
#imgs:hover { 
 
    opacity: 1; 
 
    filter: alpha(opacity=100); 
 
    transform: scale(1.2); 
 
    -webkit-transform: scale(1.2); 
 
    -moz-transform: scale(1.2); 
 
    -ms-transform: scale(1.2); 
 
    -o-transform: scale(1.2); 
 
} 
 
html { 
 
    width: 100%; 
 
    height: 100%; 
 
    clip: auto; 
 
    position: absolute; 
 
    overflow-x: hidden; 
 
    overflow-y: hidden; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<body style="margin:0;"> 
 

 
    <div id="start" style="bottom:0px"> 
 
    <img src="saint die.jpg" style=" z-index:-20; width:150%; position:absolute"> 
 
    <div align="center" style="bottom:69%; position:absolute; width:45%; left:28%; ;"> 
 
     <img src="DELICETEXT.png" alt="delice" style="width:100%"> 
 
    </div> 
 
    <div id="imgs" align="center" style="position:absolute; width:25%; height: 25%; left:38%; top:30%;"> 
 
     <img src="delice.png" alt="L'arbre a Delices" style="width:100%; position: relative;"> 
 
    </div> 
 
    </div> 
 
</body>

私はボタン/画像の上に置くと、予想通り、それが拡大します。しかし、それをクリックすると何も起こりません。私はコンソールに何も間違いを見たことがなく、Googleを検索しても何も表示されませんでした。

どうすればこの問題を解決できますか?

+1

「bottom」を使用していますが、あなたのCSSに「position」という型を与えたことはありません。コンソールまたはインスペクタで値自体が変更されているかどうかを確認します。 –

答えて

1

あなたはtoprightbottom、またはleftプロパティアニメーション化している場合、アニメーションはそれを移動できるようにする要素に位置を指定する必要があります。.animate() documentationパー

<div id="start" style="bottom:0px; position:relative;"> 

を:

方向性プロパティ(top,rightbottomleft)には、要素には影響がありません positionスタイルのプロパティはstaticです。これはデフォルトでは です。

+0

ここのキーは位置です:#start divで状態を忘れた相対 –

関連する問題