我想制作一个简单的电子邮件输入 + 按钮表单，一旦提交，应该在同一页面上替换为另一个 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 回答
弑天下
TA贡献1818条经验 获得超8个赞
只是几件事。
定位要隐藏的内部元素 - 您不能定位包装元素（“新闻稿”）隐藏它然后显示其中一个子元素。您需要定位-“取消订阅”。
为您想要淡入视图的其他区域提供一个起始样式以将其隐藏（“已订阅”） 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>
添加回答
举报
0/150
提交
取消