Как мне анимировать prepend?

#javascript #jquery

Хочу чтобы не сразу появлялся prepand, а немного анимировано: появлялся не так быстро
и справа налево.

Вот моя реализация:



$('.client').hover(function() {
    $(this).prepend('
Remove
').show('fast')
  },
  function() {
    $('.remove').remove();
  });

$('body').on('click', '.remove', function() {
  $(this).parent().remove();
})
.panel {
  margin: 10px;
}

.remove {
  float: right;
}



  

    

      

        
Фамилия имя: Иванов Иван
        
Телефон: +7911111233
        
email: test@mail.ru
      
    
  
  

    

      

        
Фамилия имя: Иванов Иван
        
Телефон: +7911111233
        
email: test@mail.ru
      
    
  
  

    

      

        
Фамилия имя: Иванов Иван
        
Телефон: +7911111233
        
email: test@mail.ru
      
    
  





То есть мне нужен вот этот код преобразовать $(this).prepend('
Remove
').show('fast')
    

Ответы

Ответ 1

Нет смысла всякий раз при hover создавать элемент и анимировать его JS-ом. Если не
хочется лопатить разметку, можно .remove просто добавить в блоки по готовности документа,
а дальше css сделает своё.



$('body').on('click', '.remove', function() {
  $(this).parent().remove();
})
*{
  box-sizing:border-box;
}
body{
  margin:0;
}
.panel {
  margin: 10px;
}
.client{
  position:relative;
  overflow:hidden;
}
.caption{
  padding-right:80px;
}
.client .remove{
  display:inline-block;
  position:absolute;
  right:-50px;
  top:30px;
  cursor:pointer;
  opacity:0;
  transition:all .3s ease;
}
.client:hover .remove{
  right:10px;
  opacity:1;
}



  

      

        
Фамилия имя: Иванов Иван
        
Телефон: +7911111233
        
email: test@mail.ru
      
      remove
  
  

      

        
Фамилия имя: Иванов Иван
        
Телефон: +7911111233
        
email: test@mail.ru
        
      
      remove
  
  

      

        
Фамилия имя: Иванов Иван
        
Телефон: +7911111233
        
email: test@mail.ru
      
      remove
  



Ответ 2

Вы делаете show видимого элемента с классом client после prepend. Почитайте как работает
chaining.

Вместо этого я бы вставлял спрятанный элемент перед текущим , а затем его показывал.



$('.client').hover(function() {
    $(this).prepend('
Remove
');
    $('.remove').show('fast');
  },
  function() {
    $('.remove').remove();
  });

$('body').on('click', '.remove', function() {
  $(this).parent().remove();
})
.panel {
  margin: 10px;
}

.remove {
  float: right;
}



  

    

      

        
Фамилия имя: Иванов Иван
        
Телефон: +7911111233
        
email: test@mail.ru
      
    
  
  

    

      

        
Фамилия имя: Иванов Иван
        
Телефон: +7911111233
        
email: test@mail.ru
      
    
  
  

    

      

        
Фамилия имя: Иванов Иван
        
Телефон: +7911111233
        
email: test@mail.ru