如何在document.createElement上添加淡入淡出效果？

Question

我不確定如何向使用document.createElement創建的對象添加淡入淡出效果。我試過 不同的方法沒有結果。

我對JavaScript很新，可以使用一些幫助。有沒有人有任何 解決方案？

提前致謝！

HTML

<fieldset> 
<p id="drinkNameHeadline"> Drink Name </p>       
<label for='drinkName'></label> 
<input id="drinkName" type="name" name="drinkName"> 
<p id="ingredients"> Ingredients </p> 

<label for='ingredient'></label> 
<input id="textBar" type="name" name="ingredient"> 

<div id="textBarPosition"></div> 
<input id="addBar" type="button" value="Add Ingredient Bar">  

<input class="submit" type="submit" value="Submit">      
</fieldset> 

的JavaScript

function createSector() { 
    var input = document.createElement('input'); input.setAttribute("id", 'textBar'); 
    input.type = 'text'; 
    input.name = 'name[]'; 
    return input; 
} 

var form = document.getElementById('textBarPosition'); 
document.getElementById('addBar').addEventListener('click', function(e) { 
    form.appendChild(createSector()); 
}); 

Answer 1

爲了達到效果淡入，你要添加的元素作爲孩子在3個步驟：

1. 設置你的元素的不透明度爲0
2. 它附加到母體
3. 從0到1（在淡入效果）

在代碼中，somethi做的不透明度的動畫納克這樣的：

document.getElementById('addBar').addEventListener('click', function(e) { 
    // step 1: create element and set opacity to 0. 
    var selector = createSelector(); 
    selector.style.opacity = 0; // be careful this is not working in IE before 9. 

    // step 2: append it to its parent. 
    form.appendChild(selector); 

    // step 3: fade in (we choose to do 20 steps in 1 second to go from 0 to 1. Steps are 50ms each) 
    var steps = 0; 
    var timer = setInterval(function() { 
     steps++; 
     selector.style.opacity = 0.05 * steps; 
     if(steps >= 20) { 
      clearInterval(timer); 
      timer = undefined; 
     } 
    }, 50); 
}); 

如果這個代碼應該在IE 7或8個工作，你必須設置不透明度每次加入這一行：

element.style.filter = "alpha(opacity=0)"; // for step 1 
... 
element.style.filter = "alpha(opacity=" + (5 * steps) + ")"; // for step 3 

如果您使用jQuery代碼可以更簡單地編寫，而且您不必擔心IE不兼容的不透明度：

document.getElementById('addBar').addEventListener('click', function(e) { 
    // step 1: create element and set opacity to 0. 
    var selector = $(createSelector()); 
    selector.css("opacity", 0); 

    // step 2: append it to its parent. 
    $(form).append(selector); 

    // step 3: fade in 
    selector.fadeIn(); 
}); 

Answer 2

有了比較新的瀏覽器，你可以使用opacity屬性的CSS animation。但jQuery的會使您的生活更輕鬆：

function createSector() { 
    return $('<input>') 
    .attr({id: 'textBar'}) 
    .prop({type: 'text', name: 'name[]'}) 
    .hide() 
    .fadeIn(); 
} 

var form = $('#textBarPosition'); 
$('#addBar').on('click', function(e) { 
    form.appendChild(createSector()); 
}); 

Answer 3

既然你不介意使用jQuery（你應該添加標籤），比你可以使用這個：做 HTML

<fieldset> 

    <h3>Drink Name</h3> 

    <p> 
     <label for='drinkName'></label> 
     <input id="drinkName" type="name" name="drinkName"> 
    </p> 

    <h4>Ingredients</h4> 

    <ol class="ingredients"> 
     <li> 
      <label for="ingredient_0"></label> 
      <input id="ingredient_0" type="name" name="ingredient[]"> 
     </li> 
    </ol> 

    <p> 
     <input id="addBar" type="button" value="Add Ingredient Bar"> 
    </p> 

    <p> 
     <input class="submit" type="submit" value="Submit"> 
    </p> 

</fieldset> 

，比 SCRIPT

$(document).on('ready', function() { 

    $('#addBar').on('click', function(e) { 
     var ingredients = $('.ingredients'); 
     var totalIngredients = ingredients.find('li').length; 
     var nextIngredient = $('\ 
      <li>\ 
       <label for="ingredient_' + totalIngredients + '"></label>\ 
       <input id="ingredient_' + totalIngredients + '" type="text" name="ingredient[]">\ 
      </li>'); 
     nextIngredient.hide().appendTo(ingredients).fadeIn(); 
    }); 
});