gpt4 book ai didi

javascript - jQuery 停止淡出/淡入循环

转载 作者:行者123 更新时间:2023-11-27 22:29:38 25 4
gpt4 key购买 nike

大家好,

我正在研究一些 jQuery,并尝试在单个元素中淡出和淡出。

我试图从中实现的是在单击 HTML 按钮元素时淡出它,替换里面的文本,然后用新文本淡入按钮。但是当我添加 fadeOut(); & 淡入();仅对第一个单击处理程序起作用,它会在每次单击鼠标时创建一个淡出/淡入循环。我只希望第一次点击淡出按钮元素。

此代码仅用于在 & 上进行实验,因为我只是刚刚学习 jQuery,如果我找不到这个问题的答案,这并不重要。这个问题只是出于好奇,是否可以以某种方式阻止效果循环。

HTML 代码:

<!doctype html>
<html lang="en">
<head>
<title>jQuery Test</title>
<meta name="description" content="jQuery Test">
<meta name="author" content="Shannon">
<meta charset="utf-8">
<link rel="stylesheet" href="">
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<button type="button">Click Me</button>
</body>
</html>

jQuery 代码:(添加淡入淡出效果前)

$(document).ready(function(){
$("button").click(function(){
$("button").text("You clicked me!");
$("button").click(function(){
$("button").text("You clicked me again!!");
$("button").click(function(){
$("button").text("You clicked me 3 times!!!");
});
});
});
});

jQuery代码:(添加淡入淡出效果后)

$(document).ready(function(){
$("button").click(function(){
$("button").fadeOut();
$("button").text("You clicked me!");
$("button").fadeIn();
$("button").click(function(){
$("button").text("You clicked me again!!");
$("button").click(function(){
$("button").text("You clicked me 3 times!!!");
});
});
});
});

感谢您花时间阅读我的问题,如果我违反了提问规则,请原谅我,因为这是我第一次提问

--

编辑:

谢谢大家这么快回复我的问题。你们在 jQuery 方面的努力和知识值得称赞。如您所知,我仍然是一个新手,还有很长的路要走...

--

最佳答案

一种解决方案是使用 on 和 off 来附加/分离点击:

http://jsfiddle.net/82H9A/1/

$(document).ready(function () {
$("button").on('click',function () {
$("button").off('click');
$("button").fadeOut(function () {
$("button").text("You clicked me!");
$("button").fadeIn();
});
$("button").on('click', function () {
$("button").off('click');
$("button").text("You clicked me again!!");
$("button").click(function () {
$("button").text("You clicked me 3 times!!!");
});
});
});
});

我还设置了文字淡入淡出完成后...

由于选择器的使用不当,几乎与 PSL 的第一个示例完全一样,我将发布一个更简洁的版本:

http://jsfiddle.net/82H9A/3/

$(document).ready(function () {
$("button").on('click',function () {
var $button = $(this);
$button.off('click');
$button.fadeOut(function () {
$button.text("You clicked me!");
$button.fadeIn();
});
$button.on('click', function () {
$button.off('click');
$button.text("You clicked me again!!");
$button.click(function () {
$button.text("You clicked me 3 times!!!");
});
});
});
});

免责声明:

虽然这段代码与 PSL 同时提出的代码几乎相同,但现在选择提示,我同意这是如何使用选择器的一个非常糟糕的例子。 $("button") 的重复使用仅用于演示目的,除受过训练的特技编码员外,任何人都不应尝试这样做:)

关于javascript - jQuery 停止淡出/淡入循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19119730/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com