Question

我有一个JavaScript函数，可以创建一个DOM节点并插入一个问题：

function setHeader(){
    var questionBox = document.createElement("div");
    questionBox.setAttribute("id","question" + (questionNumber + 1));
    document.body.insertBefore(questionBox,scriptBox);
    var questionElement = document.createElement("h3");
    questionElement.setAttribute("id","question" + (questionNumber + 1));
    var questionText = document.createTextNode(questions[questionNumber].question);
    questionElement.appendChild(questionText);
    questionBox.appendChild(questionElement);
}

我想知道的是如何使用jQuery使问题淡入或淡出？

上述功能创建：

<div id="question1">
   <h3 id="question1">Question here</h3>
</div>

我刚刚意识到我对div和h3

拥有相同的ID

Answer 1

尝试（它使用jQuery，因为你使用jQuery标记它）

function setHeader() {
    var questionBox = document.createElement("div");
    questionBox.setAttribute("id", "question" + (questionNumber + 1));
    var questionElement = document.createElement("h3");
    questionElement.setAttribute("id", "question" + (questionNumber + 1));
    var questionText = document.createTextNode(questions[questionNumber].question);
    questionElement.appendChild(questionText);
    questionBox.appendChild(questionElement);

    //adding to the current dom with fade In animation
    //for the fadeIn to work first the element must be hidden so we hide the target element first then adds it to the dom after that the fadeIn() animation method is called
    $(questionBox).hide().appendTo(scriptBox).fadeIn()
}

演示：Fiddle

Answer 2

Jquery提供淡入和淡出功能。

$('h3#question'+(questionNumber+1)).fadeIn();
$('h3#question'+(questionNumber+1)).fadeOut();

作为旁注，ID属性在文档中应该是唯一的。上面的代码应该可以正常工作，但是重复ID可能会让你头疼。

如何使这个JavaScript函数淡入或淡出？

2 个答案: