Why won't slideDown() function work in JQuery event handler?
Question
I have just started trying to learn JQuery event handling, and cannot seem to understand why this is happening. I read through the section on event handling in the documentation, but I am still having trouble manipulating objects on the page from the event handler. I get the basic idea of event bubbling up through the DOM, and have been successful i attaching primitive functions that operate on the specific object to which they are attached, or which can launch an alert. Below is the HTML, CSS, and Javascript, and the trouble is specifically with this handler:
$("#picTwo").click(function() {
alert("Handle for left arrow");
$("#picOne").slideDown(3000, linear, function()
{
alert("Why doesn't it work?");
});
Here is the full code
$(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>
Thanks for your time and help, it is greatly appreciated.
1 answers
solution1
0 2021-05-27 18:19:53
slideDown() used for animate in some content which is not visible. Here your content is already visible so slideDown() seems not working although it is working but cannot be seen. To get animation you need to hide the element by changing css display:none or else add .hide() method before slideDown() like
$("#picTwo").click(function() {
$("#picOne").hide().slideDown(3000, "linear", function() {
alert("Why doesn't it work?");
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.