Вам нужно всегда скрывать элемент при использовании функции jQuery slideDown?

Question

Я задал вопрос относительно чего-то, связанного с этим ранее, но тот, кто ответил, не очень хорошо объяснил его ответ.

Когда вы нажимаете кнопку «duplicate» в моей форме, я бы хотел, чтобы поле ввода скользило вниз, а не просто появилось.

Он сказал, что вам всегда нужно скрыть элемент с помощью функции hide() перед использованием функции slideDown(), это правильно?

HTML:

<form action="javascript:void(0);" method="POST" autocomplete="off"> 
    <button id="add">Add Field</button> 
    <div class='input_line'> 
     <input type="text" name="input_0" placeholder="Input1"><input type="button" class="duplicate" value="duplicate"> 
    </div> 
</form> 

Jquery:

jQuery(document).ready(function() { 
    'use strict'; 
    var input = 1, 
     blank_line = $('.input_line'); 

    $('#add').click(function() { 
     var newElement = blank_line.clone(true).hide(); 
     $('form').append(newElement); 
     $(newElement).slideDown(); 
    }); 

    $('form').on('click', '.duplicate', function() { 
     $(this).parent().after($(this).parent().clone()); 
     $('.input_line').last().before($('#add')); 
     input = input + 1; 
    }); 
}); 

Fiddle обновляется. JSFiddle

Что является самым простым способом сделать это?

Answer 1

Используйте .insertAfter()

jQuery(document).ready(function() { 
    'use strict'; 
    var input = 1, 
     blank_line = $('.input_line'); 

    $('#add').click(function() { 
     var newElement = blank_line.clone(true).hide(); 
     $('form').append(newElement); 
     $(newElement).slideDown(); 
    }); 

    $('form').on('click', '.duplicate', function() { 
     $(this).parent().clone().hide().insertAfter($(this).parent().after()).slideDown(); 
     $('.input_line').last().before($('#add')); 
     input = input + 1; 
    }); 
}); 

JsFiddle http://jsfiddle.net/fbcut00p/5/

Надеется, что это может помочь.

Answer 2

необходимо скрыть элемент с помощью функции hide() перед использованием функции slideDown() , это правильно?

см jQuery версии 1.11.3 источник в строках 7614-7626; $.fn.slideDown(), $.fn.slideUp() кажется, псевдоним .show(), .hide() соответственно

// Generate shortcuts for custom animations 
jQuery.each({ 
    slideDown: genFx("show"), // <- 
    slideUp: genFx("hide"), // <- 
    slideToggle: genFx("toggle"), 
    fadeIn: { opacity: "show" }, 
    fadeOut: { opacity: "hide" }, 
    fadeToggle: { opacity: "toggle" } 
}, function(name, props) { 
    jQuery.fn[ name ] = function(speed, easing, callback) { 
     return this.animate(props, speed, easing, callback); 
    }; 
});