Свойство видимости не работает должным образом с fadeOut ()

Я разрабатываю страницу обратной связи в таблице с 3 столбцами.

Name         Feedback icons          status
-------------------------------------------------
Name1        icon1 icon2 icon3       Saved
Name2        icon1 icon2 icon3       Saved
-------------------------- and so on....

Первоначально 3-й столбец имеет свойство CSS visibility:hidden, При нажатии на любой значок 3-й столбец этой строки должен отображаться как «Сохранено», а затем исчезать.
Это работает для меня в первый раз, то есть, если я нажимаю icon2 в первый раз в первом ряду сохраненные будут показываться и исчезать, когда я нажимаю icon1 в той же строке не будет отображаться 3-й столбец.

Когда я нажимаю на следующую строку, 3-й столбец появится только при первом нажатии. Пожалуйста, помогите мне.

Html

<table class="tbl_result">
<tbody>
<tr><td width="55%">Nahed </td>
<td width="42%">
<div id="tbl_row_icons0" class="tbl_row_icons">
<div class="emoji_parent">
<div class="emoji_2 emojichild">
<a title="Poor" class="feedbck_name" href="#"><img src="/user_uploads/my.aisc.ac.cy/emoticon/poor.png"></a>
</div>
<!--second icon--!>
<div class="emoji_3 emojichild"><a title="Good" class="feedbck_name" href="#"><img src="/user_uploads/my.aisc.ac.cy/emoticon/good.png"></a>
</div>
</div>
</td><td width="7%" class="toggle_save">Saved</td>
</tr>
</tbody>
</table>

CSS

.toggle_save
{
visibility:hidden;
color:green;
font-weight: bold;
}

JQuery функция

//click event for icon
$(".feedbck_name").click(function()
{
$(this)
.closest('td')
.next('td.toggle_save')
.css('visibility','visible')
.delay(1000)
.fadeOut();

return false;
});

1

Решение

Когда вы выполняете fadeOut (), ваш скрипт заставит его отобразить: none в свойстве css.
Вы должны исчезнуть на видимости вместо этого.
Попробуйте ниже код для того же

$(".feedbck_name").click(function()
{
$(this).parent('td').siblings('td.toggle_save')
.css('opacity','1')
.css("visibility", "visible")
.fadeTo(1500, 0, function(){
$(this).parent('td').siblings('td.toggle_save')
.css("visibility", "hidden").css('opacity','1');
});
return false;
});

Проверьте эта скрипка для того же

1

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]