JQuery單擊方法不起作用

我想要在中間按下一個按鈕，該按鈕將使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什麼也沒有發現。

我該如何解決這個問題？

來源

2016-08-23 Luca Donati

您使用'bottom'，但從未在CSS中提供過'position'類型。檢查它是否在控制檯或檢查器中更改值本身。 –

您必須指定一個位置的元素，讓動畫來移動它，如果你的動畫top，right，bottom，或者left性質：

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

每.animate() documentation：

方向屬性（top,right, bottom,left）沒有可識別的對元素的影響if他們的position風格屬性是static，其默認爲。

來源

2016-08-23 21:19:18 j08691

這裏的關鍵是位置：我忘了在#start div中聲明的相對位置 –

JQuery單擊方法不起作用

回答

相關問題