使用 fadeToggle() 效果将文本附加到正文背景图像

Question

这对我来说是一个重要的项目，我一直在努力寻找一种方法来防止文本被一遍又一遍地附加到 body。我有不同的幻灯片，每次您点击 向右箭头 或 向上箭头键 时都会出现。当您点击 'p' 时，您暂停幻灯片，您将看到 正文背景图片。使用 append() 函数，我向图像添加了文本。不幸的是，当您 pause 或 play 时，文本会一直被附加。到目前为止，我尝试使用 hide()、fadeOut()、one() 甚至 dequeue() 来阻止它但没有成功。我怎样才能将文本附加到正文一次？ fadeToggle() 功能可以很好地显示和隐藏正文背景图像，只有文本导致问题

  $(document).keyup(function(event) {
        var text = $("<p.text>PRESS 'P' TO GO BACK</p.text>");
        if(event.keyCode == 39 || event.keyCode == 40 ||   event.keyCode == 32) {
        next(); // right arrow and bottom arrow keys
        }
        else if(event.keyCode == 37 || event.keyCode == 38){
        back(); // left arrow and up arrow keys
        }
        else if(event.keyCode == 80){  // 'p' key to pause and play 
            $('.slides').fadeToggle();
            $('body').append(text).hide();
        }
    });

CSS:

   body {
    font-size: 2.5em;
    background: url("bodyBack.png");
}

这不是完整的代码

Answer 1

试试这个.. 让我知道你是否需要这个

var notappend = true;
     $(document).keyup(function(event) {
            var text = $("<p.text>PRESS 'P' TO GO BACK</p.text>");
            if(event.keyCode == 39 || event.keyCode == 40 ||   event.keyCode == 32) {
            next(); // right arrow and bottom arrow keys
            }
            else if(event.keyCode == 37 || event.keyCode == 38){
            back(); // left arrow and up arrow keys
            }
            else if(event.keyCode == 80){  // 'p' key to pause and play
                $('.slides').fadeToggle(); 
                if(notappend == true){
                    $('body').append(text);
                    notappend = false;
                }else{
                    //notappend == true;
                }

            }
        });

尝试解决 notappend == true；并且notappend == false；得到你想要的

使用 fadeToggle() 效果将文本附加到正文背景图像

Appending text to the body background image with fadeToggle() effect

jquery

jquery-effects