jQuery使用参数淡入淡出功能
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery使用参数淡入淡出功能相关的知识，希望对你有一定的参考价值。
我试图使这个jQuery函数允许参数或某种方式使它能够使用我的列表中的每个元素。
我有一个函数可以为列表中的第一个元素执行我想要的操作，但对其他元素不起作用。我想知道是否有一种方法可以将参数传递给jQuery函数，所以我可以使函数，所以我可以使它与几个元素一起工作。
$(document).ready(function() {
$("#f2").click(function() {
$("#f2").fadeOut()
$("#f1").delay(375).fadeIn()
});
$("#f1").click(function() {
$("#f1").fadeOut();
$("#f2").delay(375).fadeIn();
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<div class="direction-r">
<div class="flag-wrapper">
<span class="flag">Kentucky Dam Flood Gates Open</span>
<span class="time-wrapper">
<span class="time">Present Day</span>
</span>
</div>
<div id="f2">
<img src="images/Top-KY-Dam.jpg" />
</div>
<div class="desc" id="f1">
Lorem Ipsum...
</div>
</div>
</li>
<li>
<div class="direction-r">
<div class="flag-wrapper">
<span class="flag">Another Item</span>
<span class="time-wrapper">
<span class="time">Present Day</span>
</span>
</div>
<div id="f2">
<img src="images/Top-KY-Dam.jpg" />
</div>
<div class="desc" id="f1">
Lorem Ipsum...
</div>
</div>
</li>
<li>
<div class="direction-r">
<div class="flag-wrapper">
<span class="flag">Another Item</span>
<span class="time-wrapper">
<span class="time">Present Day</span>
</span>
</div>
<div id="f2">
<img src="images/Top-KY-Dam.jpg" />
</div>
<div class="desc" id="f1">
Lorem Ipsum...
</div>
</div>
</li>
</ul>我希望这可以处理所有需要它的类，并且只更改你点击的那些，但该功能仅适用于列表中的第一个对象。
答案
这是您更新的代码切换到类。
如果始终以相同的选择器为目标，则无需传递选择器。
你还需要在函数中添加一些prev和next逻辑，否则点击的任何f2或f1元素都会触发页面上的所有元素。
$(document).ready(function() {
$(".f2").click(function() {
$(this).fadeOut();
$(this).next('.f1').delay(375).fadeIn();
});
$(".f1").click(function() {
$(this).fadeOut();
$(this).prev('.f2').delay(375).fadeIn();
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<div class="direction-r">
<div class="flag-wrapper">
<span class="flag">Kentucky Dam Flood Gates Open</span>
<span class="time-wrapper">
<span class="time">Present Day</span>
</span>
</div>
<div class="f2">
<img src="images/Top-KY-Dam.jpg" />
</div>
<div class="desc f1">
Lorem Ipsum...
</div>
</div>
</li>
<li>
<div class="direction-r">
<div class="flag-wrapper">
<span class="flag">Another Item</span>
<span class="time-wrapper">
<span class="time">Present Day</span>
</span>
</div>
<div class="f2">
<img src="images/Top-KY-Dam.jpg" />
</div>
<div class="desc f1">
Lorem Ipsum...
</div>
</div>
</li>
<li>
<div class="direction-r">
<div class="flag-wrapper">
<span class="flag">Another Item</span>
<span class="time-wrapper">
<span class="time">Present Day</span>
</span>
</div>
<div class="f2">
<img src="images/Top-KY-Dam.jpg" />
</div>
<div class="desc f1">
Lorem Ipsum...
</div>
</div>
</li>
</ul>另一答案
创建一个函数并包装你的代码以传递选择器并延迟为params。
function setAnimation(firstSelector, secondSelector, delayNum) {
$(secondSelector).click(function() {
$(secondSelector).fadeOut()
$(firstSelector).delay(delayNum).fadeIn()
});
$(firstSelector).click(function() {
$(firstSelector).fadeOut();
$(secondSelector).delay(delayNum).fadeIn();
});
}
在您的脚本上只需调用以下函数：
$(document).ready(function() {
setAnimation("#f1", "#f2", 375);
});
另一答案
试试这个工作正常，JSFiddle Demo
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<div class="direction-r">
<div class="flag-wrapper">
<span class="flag">Kentucky Dam Flood Gates Open</span>
<span class="time-wrapper">
<span class="time">Present Day</span>
</span>
</div>
<div class="f2">
<img src="images/Top-KY-Dam.jpg" />
</div>
<div class="desc f1">
Lorem Ipsum...
</div>
</div>
</li>
<li>
<div class="direction-r">
<div class="flag-wrapper">
<span class="flag">Another Item</span>
<span class="time-wrapper">
<span class="time">Present Day</span>
</span>
</div>
<div class="f2">
<img src="images/Top-KY-Dam.jpg" />
</div>
<div class="desc f1">
Lorem Ipsum...
</div>
</div>
</li>
<li>
<div class="direction-r">
<div class="flag-wrapper">
<span class="flag">Another Item</span>
<span class="time-wrapper">
<span class="time">Present Day</span>
</span>
</div>
<div class="f2">
<img src="images/Top-KY-Dam.jpg" />
</div>
<div class="desc f1">
Lorem Ipsum...
</div>
</div>
</li>
</ul>
JQuery的：
$(document).ready(function() {
$(".f2").on('click', function() {
$(".f2").fadeOut();
$(".f1").delay(375).fadeIn();
});
$(".f1").on('click', function() {
$(".f1").fadeOut();
$(".f2").delay(375).fadeIn();
})
})
以上是关于jQuery使用参数淡入淡出功能的主要内容，如果未能解决你的问题，请参考以下文章