jquery show/hide with slow input 不工作
我想制作一个简单的电子邮件输入 + 按钮表单，一旦提交，应该在同一页面上替换为另一个 div。我在表单上应用了 jquery 的 .hide("slow") ，在第二个 div 上应用了 .show("slow") ，虽然它确实显示/隐藏元素，但它不应用平滑过渡。
我究竟做错了什么？？
实例： https: //codepen.io/mcancode/pen/vYKXmbr
代码：
<!DOCTYPE html>
<html>
<head>
<style>
#subscribed > div > p {
display: none;
}
</style>
</head>
<body>
<main>
<section id="newsletter">
<div id="unsubscribed">
<h3>Subscribe to our newsletter to get 10% off your next purchase</h3>
<form id="newsletter-form">
<div>
<input type="email" placeholder="Enter your email">
<button type="submit">
Submit
</button>
</div>
</form>
</div>
<div id="subscribed">
<div>
<p>Thank you for subscribing! You should receive an email with the discount code in the next 5 minutes.</p>
</div>
</div>
</section>
<!-----------------END OF NEWSLETTER---------->
</main>
<!--JS files...-->
<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>
$(() => {
//check when newsletter form submitted
$("#newsletter-form").submit((event)=> {
event.preventDefault();
$("#unsubscribed").hide("slow");
$("#subscribed>div>p").show("slow");
})
});
</script>
</body>
</html>
白衣非少年1回答
-
弑天下
只是几件事。定位要隐藏的内部元素 - 您不能定位包装元素（“新闻稿”）隐藏它然后显示其中一个子元素。您需要定位-“取消订阅”。为您想要淡入视图的其他区域提供一个起始样式以将其隐藏（“已订阅”） style="display:none"看起来您引用的 jquery 版本不包含此动画 - 我在您的原始参考之后引用了 jquery 的更新版本（https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery .min.js )<!DOCTYPE html><html><head> <style></style></head><body> <main> <section id="newsletter"> <div id="unsubscribed"> <h3>Subscribe to our newsletter to get 10% off your next purchase</h3> <form id="newsletter-form"> <div> <input value="sample@email.com" type="email" placeholder="Enter your email"> <button type="submit"> Submit </button> </div> </form> </div> <div id="subscribed" style="display:none;"> <div> <p>Thank you for subscribing! You should receive an email with the discount code in the next 5 minutes.</p> </div> </div> </section> <!-----------------END OF NEWSLETTER----------> </main> <!--JS files...--> <!-- jQuery and JS bundle w/ Popper.js --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(() => { //check when newsletter form submitted $("#newsletter-form").submit((event)=> { event.preventDefault(); $("#unsubscribed").hide("slow"); $("#subscribed").show("slow"); })}); </script></body></html>
随时随地看视频慕课网APP
相关分类
JavaScript