Как добавить fade в 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. Append его родителю
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

При относительно новых браузеров, вы могли бы использовать 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(); 
    }); 
});