[英]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.