Question

大家好，

我正在研究一个小jQuery，并尝试淡出＆amp;在一个元素中。

我想要实现的目的是在点击HTML按钮元素时淡出它，替换里面的文本，然后用新文本淡回按钮。但是当我添加fadeOut（）; ＆安培;淡入（）;只对第一个单击处理程序起作用，它会在每次单击鼠标时创建一个淡出/循环。我只希望第一次点击淡出＆amp;在按钮元素中。

此代码仅用于试验＆amp;因为我只是学习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的努力和知识都值得赞扬。你可以说，我仍然是一个新手，还有很长的路要走......

-

Answer 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同时提出的相同，但现在选择抱怨，我同意这是如何使用选择器的一个非常糟糕的例子。重复使用$（“按钮”）仅用于演示目的，除非经过训练的特技编码器，否则任何人都不应尝试使用：）

Answer 2

您希望使用第一个fadeOut中的回调函数，或者在fadeOut发生时文本会发生变化。

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

在此处查看：http://jsfiddle.net/6kSxg/1/

Answer 3

$(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);
    });
});

FIDDLE

jQuery停止fadeOut / fadeIn循环

3 个答案:

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

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

声明：