2

嗨，大家好，

我正在研究一个小 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 上的努力和知识都值得称赞。如您所知，我仍然是一个新手，还有很长的路要走……

--

4

3 回答 3

1

您想使用第一个fadeOut 的回调函数，否则文本会在fadeOut 发生时发生变化。

$('button').click(function(){
    $('button').fadeOut(function(){
        $(this).text('You Clicked me!').fadeIn();
    });
});

看到它在这里工作：http: //jsfiddle.net/6kSxg/1/

于 2013-10-01T15:12:42.240 回答
1

一种解决方案是使用 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") 仅用于演示目的，除受过训练的特技编码员外，任何人都不应尝试 :)

于 2013-10-01T15:10:45.807 回答
1 
$(document).ready(function(){
    $("button").on('click', function(){
        var self  = $(this),
            speed = 500,
            numb  = self.data('numb')?self.data('numb'):0,
            txt   = {
                1:'You clicked me!',
                2:'You clicked me again!!',
                3:'You clicked me 3 times!!!'
            };
        (function(f) {
            $.when( self.stop(true,true).fadeOut(speed) ).always(function() {
                self.text(txt[f]).fadeIn(speed);
            });
        })(++numb);
        self.data('numb', numb = numb > 2 ? 0 : numb);
    });
});

小提琴

于 2013-10-01T15:18:01.020 回答