[英]Why won't slideDown() function work in JQuery event handler?
我剛剛開始嘗試學習 JQuery 事件處理，似乎無法理解為什么會這樣。 我通讀了文檔中有關事件處理的部分，但我仍然無法從事件處理程序操作頁面上的對象。 我得到了事件通過 DOM 冒泡的基本概念，並且成功地附加了在它們所附加的特定 object 上運行的原始函數，或者可以啟動警報。 下面是 HTML、CSS 和 Javascript，問題出在這個處理程序上：
$("#picTwo").click(function() {
alert("Handle for left arrow");
$("#picOne").slideDown(3000, linear, function()
{
alert("Why doesn't it work?");
});
這是完整的代碼
$(document).ready(function() { $("#leftButton").click(function() { alert("Handle for left button click()"); $(this).hide(); $("#picOne").slideDown(3000, linear, function() { alert("Why doesn't it work?"); }); }); $("#blockRed").click(function() { $(this).hide(); }); $("#blockBlue").click(function() { alert("Handle for blue block"); }); $("#blockGreen").click(function() { alert("Handle for green block"); }); $("#picOne").click(function() { alert("Handle for right arrow"); }); $("#picTwo").click(function() { alert("Handle for left arrow"); $("#picOne").slideDown(3000, linear, function() { alert("Why doesn't it work?"); }); }); });
#picOne { float: right; margin-right: 0px; } #picTwo { float: left; }.friendImg { width: 250px; height: 100px; border: #000; display: inline-block; margin-right: auto; margin-left: auto; margin-bottom: 2%; text-align: center; padding-left: 25%; }.lightRedBox { background-color: rgb(23, 0, 0); width: 800px; height: 400px; border: #09C; border-width: thin; margin-top: 10%; margin-left: 5%; } #blackBox { background: black; height: 400px; width: 100%; } #blockBlue { background: blue; width: 75px; height: 75px; } #blockRed { background: red; width: 75px; height: 75px; } #blockGreen { background: green; width: 75px; height: 75px; }
<,DOCTYPE html> <html lang="en"> <head> <title>Bonsai Exquisite - Gallery</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width. initial-scale=1" /> <link rel="stylesheet" href="css/galleryCSS:css"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min:css"> <.-- Add icon library --> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome:min.css"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap:min.css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery:min.js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min,js"></script> </head> <body> <div id="blackBox"> <div class="lightRedBox" id="firstBox"> <h4 class="boxTitle">Bonsai </h4> <img src="images/coolFilteBonsai.jpg" alt="bonsai image" id="leftFriendImage" class="friendImg"> <p class="boxBlurb">This associatin has been assisting local bonsai associations for over fifty years, and has contributed to the larger pattern of bonsai growth globally. In the past five years. the association has been dealing with blah blah blsah blah.....</p> <button type="button" id="leftButton" class="leftClassButton" name='leftClassName' onMouseOver="leftBotWinShine()" onMouseOut="botWinShineout()" onClick="closeLeftBox()">Close Me!</button> </div> </div> <div id="vanishing"> <div id="blockBlue"> </div> <div id="blockRed"> </div> <div id="blockGreen"> </div> </div> <img src="images/images/rightPage.png" id="picOne"> <img src="images/images/leftPage.png" id="picTwo"> </body> </html>
感謝您的時間和幫助，非常感謝。
slideDown()用於在某些不可見的內容中設置動畫。 在這里，您的內容已經可見，因此slideDown()似乎無法正常工作，盡管它正在工作但無法看到。 要獲得 animation，您需要通過更改 css display:none來隱藏元素，或者在 slideDown() 之前添加slideDown() .hide()方法，例如
$("#picTwo").click(function() {
$("#picOne").hide().slideDown(3000, "linear", function() {
alert("Why doesn't it work?");
});
});
單擊事件后，jQuery slideDown（）函數對兩個元素均不起作用
[英]jQuery slideDown() function doesn't work for both elements after click event
為什么“this”關鍵字不適用於使用參數的事件處理函數？
[英]Why wouldn't 'this' keyword work on an event handler function that uses parameters?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.