我制作了一個手風琴，但我希望我的加號圖標平滑過渡到減號，如何使用 jQuery 完成？
[英]I have made an accordion, but I want my plus icon to smoothly transition into a minus, how can this be done with jQuery?
問題描述
所以我做了一個手風琴，它可以做我想做的事情（當然它可以做更多的樣式，但我正在嘗試練習 jQuery），我想讓加號按鈕變成一個減號並平滑過渡，比如當您按下標題並出現下拉菜單時，加號可能會旋轉並變成減號或類似的東西。
任何幫助將不勝感激，謝謝。
到目前為止，這是我的代碼： https://jsfiddle.net/SpluntyGeese/9fdzej23/39/
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet"href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@200&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/704e1ec7c9.js" crossorigin="anonymous"></script>
</head>
<div class="accordion-area">
<div class="acc-trigger"><h2>Heading</h2> <i class="fas fa-plus"></i> <i class="fas fa-minus</i></div>
<div class="acc-para">This is some test text to ensure that this accordion actually works lol.
</div>
</div>
<div class="accordion-area">
<div class="acc-trigger"><h2>Heading</h2> <i class="fas fa-plus"></i> <i class="fas fa-minus"></i></div>
<div class="acc-para">This is some test text to ensure that this accordion actually works lol.
</div>
</div>
<div class="accordion-area">
<div class="acc-trigger"><h2>Heading</h2> <i class="fas fa-plus"></i> <i class="fas fa-minus"></i>
</div>
<div class="acc-para">This is some test text to ensure that this accordion actually works lol.
</div>
</div>
<div class="accordion-area">
<div class="acc-trigger"><h2>Heading</h2> <i class="fas fa-plus"></i> <i class="fas fa-minus"></i>
</div>
<div class="acc-para">This is some test text to ensure that this accordion actually works lol.
</div>
</div>
*{
font-family: 'Outfit', sans-serif;
}
.acc-trigger {
position: relative;
background: #c87800;
color: #fff;
padding: 10px 20px;
}
.acc-trigger i {
position: absolute;
right: 0;
width: 50px;
top: 50%;
transform: translateY(-50%);
}
.acc-para {
height: 0;
padding: 0;
transition: all 0.3s ease;
color: transparent;
background: #2f2f2f;
}
.acc-para.active {
padding: 20px;
height: auto;
color: #fff;
background: #2f2f2f;
border-left: 5px solid #222;
}
jQuery(document).ready(function($) {
$(".acc-trigger").click(function() {
$('.acc-para').removeClass('active');
$(this).closest('.accordion-area').find('.acc-para').toggleClass('active');
});
});
1 個解決方案
解決方案1
0 2021-11-23 14:19:35
您可以使用 jquery fadeIn和fadeOut ...
jQuery(document).ready(function($) { $(".acc-trigger").click(function() { $('.acc-para').removeClass('active'); $('.fa-minus').fadeOut(); $('.fa-plus').fadeIn(); $(this).find('.fa-minus').fadeIn(); $(this).find('.fa-plus').fadeOut(500); $(this).closest('.accordion-area').find('.acc-para').toggleClass('active'); }); });
* { font-family: 'Outfit', sans-serif; }.acc-trigger { position: relative; background: #c87800; color: #fff; padding: 10px 20px; }.acc-trigger i { position: absolute; right: 0; width: 50px; top: 50%; transform: translateY(-50%); }.acc-para { height: 0; padding: 0; transition: all 0.3s ease; color: transparent; background: #2f2f2f; }.acc-para.active { padding: 20px; height: auto; color: #fff; background: #2f2f2f; border-left: 5px solid #222; }
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@200&display=swap" rel="stylesheet"> <script src="https://kit.fontawesome.com/704e1ec7c9.js" crossorigin="anonymous"></script> </head> <div class="accordion-area"> <div class="acc-trigger"> <h2>Heading</h2> <i class="fas fa-plus"></i> <i class="fas fa-minus"></i></div> <div class="acc-para">This is some test text to ensure that this accordion actually works lol.</div> </div> <div class="accordion-area"> <div class="acc-trigger"> <h2>Heading</h2> <i class="fas fa-plus"></i> <i class="fas fa-minus"></i></div> <div class="acc-para">This is some test text to ensure that this accordion actually works lol.</div> </div> <div class="accordion-area"> <div class="acc-trigger"> <h2>Heading</h2> <i class="fas fa-plus"></i> <i class="fas fa-minus"></i></div> <div class="acc-para">This is some test text to ensure that this accordion actually works lol.</div> </div> <div class="accordion-area"> <div class="acc-trigger"> <h2>Heading</h2> <i class="fas fa-plus"></i> <i class="fas fa-minus"></i></div> <div class="acc-para">This is some test text to ensure that this accordion actually works lol.</div> </div>
如何在懸停的div中順利過渡？ [Tumblr更新標簽]
[英]How can I smoothly transition in a div on hover? [Tumblr Updates Tab]
如何使div的高度與內容和寬度平滑過渡？
[英]How can I make the height of a div transition smoothly with content and width?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.