2010-12-30 3 views
0

Я этоКак сделать TdS слайд прямо с Jquery

function loadActivity() { 
    $.ajax({ url: "default.aspx?onemore=yes", dataType: 'json', context: document.body, type: "POST", 
     success: function (data) { if (data == null || data == '') loadActivity(); addActivity(data.msg, data.logo, data.bag, data.date); } 
    }); 
} 

function addActivity(msg, logo, bag, date) { 
    $("#activities tr:nth-child(2) td:last-child").fadeOut(2500, function() { $(this).remove(); appendNewAct(msg, logo, bag, date) }); 

} 
function appendNewAct(msg, logo, bag, date) { 
    $("#activities tr:nth-child(2)").prepend('<td style="display: none;" class="activity"><img class="bag" src="images/' + bag + '.png" /><div>' + msg + '</div><div class="time">' + date + '</div>' + (logo != '' ? '<img class="logo" src="' + logo + '" />' : '') + '</td>'); 
    $("#activities tr:nth-child(2) td:first-child").fadeIn(2500, function() { setTimeout(loadActivity, 2500); }); 
} 

Как вы можете видеть, у меня есть таблица с TdS боком о боке. Сценарий удаляет каждые 2,5 секунды правильный TD и помещает новый TD слева. Моя проблема в том, что при удалении правого TD (с использованием fadeOut) -> все левые TDs прыгают и заменяют свое место. Я хочу, чтобы они плавно скользили вправо, как поток активности.

<table cellspacing="0" cellpadding="0" id="activities"> 
       <tbody> 
       <tr><td class="activity" style="">blblblblblb 
       <td> 
<td class="activity" style="">lblblblblb 
       <td> 
<td class="activity" style="">lblblblblb 
       <td> 
<td class="activity" style="">blblblbl 
       <td></tr> 
</tbody></table> 

Благодаря

+0

было бы лучше, если бы вы могли предоставить живой сайт, где мы могли видеть его, что вы пытаетесь для того чтобы достигнуть. Может быть, это просто я разговариваю ... Приветствия –

+0

Извините, его внутренние ... Вы знаете те стримеры активности twitter? Я хочу, как это, но слева направо, а не сверху донизу – Himberjack

+0

положил его на jsFiddle – ONYX

ответ

2

Ячейки таблицы не являются правильным инструментом в данном случае; таблица будет идти на большие расстояния, чтобы занять всю ее площадь, а прокладка ячеек - непростая задача.

Попробуйте достигнуть эффекта, используя DIV s с display: inline; стиль.

+0

спасибо! плохо попробуйте – Himberjack

+0

Вы имеете в виду с float: left? – Himberjack

+0

Нет. Почему вы хотите их плавать? Просто убедитесь, что они остаются в одной строке и используют соответствующую настройку для «переполнения» во внешнем контейнере, чтобы убедиться, что они не протекают. –

0

Я бы посмотрел на функцию анимации jQuery и использовал ее в атрибутах css слева и справа.

Смежные вопросы