0

Написал код, который удаляет определенный элемент (content-holder) из DOM и вставляет новый элемент с таким же классом после элемента, на который кликнули. Все прекрасно работает, только хочется немного анимации при появлении элемента content-holder. Добавление в хвост fadeIn() ни к чему не приводит. С animate() тоже самое. Может надо как-то переделать код?

$(document).ready(function(e) {
    loadContent('defaultpage');
    function addContentHolder(){
        var content = '<div class="content-holder"><div class="content"></div></div>';
        $(arguments[0]).after(content); 
    }
    function loadContent(){
        var path = 'http://localhost/stitch.ru/content/';
        var fileName = arguments[0] + '.';
        var extension = 'html';
        $('.content').load(path + fileName + extension);
    }
$('.button').click(function(e) {    
    $('.content-holder').remove();
    addContentHolder(this);
    var id = $(this).attr('id');
    loadContent(id.charAt(1)); 
});

});

// Как вы могли заметить, я добавляю новый элемент через .after

2 ответа 2

5

А вы сделайте content скрытым, а потом уже делайте fadeIn.

function addContentHolder(){
    $('<div class="content-holder"><div class="content"></div></div>')
        .hide()
        .appendTo(arguments[0])
        .fadeIn();
}
1
<style>
.content-holder {display:none}
</style>

function addContentHolder(){
    var content = '<div class="content-holder"><div class="content"></div></div>';
    $(arguments[0]).after(content); 
    $('.content-holder').fadeIn();
}

Все должно работать.

4
  • Да. Все работает. Спасибо. Только пришлось в начало добавить $('.content-holder').show() чтобы скрытый элемент все же отображался при начальной загрузке страницы.
    – user7004
    10 мая 2012 в 1:33
  • @Ghringo, а зачем тогда такие костыли? Сделали бы как у меня, скрыли только когда необходимо
    – neoascetic
    10 мая 2012 в 1:37
  • Я пробовал. В том виде, который у вас этот код не работает. Точнее работает с серьезными глюками. Я не стал разбираться в чем дело, просто воспользовался советом Dobby007. Это, конечно, может быть из-за того, что вы не видели html-код и саму задумку не так поняли.
    – user7004
    10 мая 2012 в 5:13
  • По идее для вашего случая код, который представил @neoascetic, на порядок лучше. Я написал быстро. Сильно не думал как лучше будет сделать. Попробуйте сначала сделать appendTo, а потом hide, т.е: <style> .content-holder {position: absolute; top: 0; left: 0; height:200px; width:30px; background-color: yellow; z-index: 11000;} </style> $('.content-holder').remove(); $('<div class="content-holder"><div class="content">asdsads</div></div>').appendTo(arguments[0]).hide().fadeIn(); У меня все работает.
    – Dobby007
    10 мая 2012 в 7:41

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.