Comment créer une suppression JQuery slideLeft pour un élément de liste?

Question

Bonjour J'essaie de créer une page en chargeant mon image, mon contenu et l'option de suppression. L'URL et le contenu de l'image sont sortis de la base de données. Ce dont je veux avoir besoin, c'est qu'en cliquant sur l'image, l'animation glisserait à gauche montrant que l'image a été supprimée. Mon code à ce jour ...

Jquery Script:

$(function() { 
$("#sortable").sortable(); 
$('a.delete').click(function(e) { 
    e.preventDefault(); 
    var parent = $(this).parent(); 
    $.ajax({ 
     type: 'get', 
     url: 'jquery-record-delete.php', 
     data: 'ajax=1&delete=' + parent.attr('id').replace('record-',''), 
     beforeSend: function() { 
      parent.animate({'backgroundColor':'#fb6c6c'},300); 
     }, 
     success: function() { 
      //parent.slideUp(300,function() { 
          // replaced with following 
          parent.animate({left: '100px'}, 300, function() { 
       parent.remove(); 
      }); 
     } 
    }); 
}); 
}); 

la requête;

if(isset($_GET['delete'])) 
{ 
    mysql_select_db($database_conn_foliodb, $conn_foliodb); 
    $query_rs_text = 'DELETE FROM text WHERE text_id = '.(int)$_GET['delete']; 
    $result = mysql_query($query_rs_text, $conn_foliodb) or die(mysql_error()); 
} 

mysql_select_db($database_conn_foliodb, $conn_foliodb); 
$query_rs_images = 'SELECT * FROM text ORDER BY text_id ASC'; 
$rs_images = mysql_query($query_rs_images, $conn_foliodb) or die(mysql_error()); 
$row_rs_images = mysql_fetch_assoc($rs_images); 

sortie du corps:

<div class="demo"> 
<ul id="sortable"> 
<?php 
do { 
    echo '<li class="record" id="record-'.$row_rs_images['text_id'].'"><table><tr><td> 
       <strong>'.$row_rs_images['content'].'</strong> 
      </td></tr> 
      <tr><td><img src="'.$row_rs_images['img'].'" width="100" height="100" /><tr><td> 
      <tr><td><a href="?delete='.$row_rs_images['text_id'].'" class="delete">Delete</a><tr><td> 
      </table></li>'; 
} while($row_rs_images = mysql_fetch_assoc($rs_images)) 

?> 
</ul> 
</div> 

Merci beaucoup.

Answer 1

au lieu de votre appel dans le slideUp()success: il suffit d'utiliser un autre animate() appel et faire

animate({left: 'XXXpx'}) 

remplaçant évidemment XXX avec le montant désiré. cela peut également nécessiter des css supplémentaires pour définir le position afin que left réagisse correctement.