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="[email protected]" 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>
添加回答
舉報