Question

我有一个下拉字段，用户可以通过ajax更改值。当更改事件发生并且数据保存在数据库中时，用户通过使包含下拉字段的行变为绿色来获得视觉“成功反馈”。到目前为止，此工作正常，但只有当行失去焦点时才会触发辉光动画（css）/如果我用鼠标将鼠标悬停在行外（无需单击）。我很感激任何建议;也许我如何做这个发光的整个概念是错误的（在ajax调用中将其置于“成功”）。

的javascript：

$("[name='dropdown_status']").on('change', function() {
            var tr = $(this).closest('tr');
            var bestell_id = $(this).attr('id');
            $.ajax({
                type: 'POST',
                url: '/files/ajax/wm_change_status_dt.php',
                data: {
                    id_bestell: bestell_id,
                    id_status: $(this).val()
                },
                success: function(data) {
                    tr.addClass('dropdown_anim');
                    tr.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
                        tr.removeClass('dropdown_anim');
                    });
                },
                error: function(jqXHR, status, err) {
                    alert(status + ': ' + err);
                }
            });
        }

的CSS：

.dropdown_anim {
  background: transparent;
  animation: color-me-in 1s;
}

@keyframes color-me-in {
 0% {
    background: transparent;
  }
  /* Adding a step in the middle */
  50% {
    background: #D3FCC7;
  }
  100% {
    background: transparent;
  }
}

Answer 1

请尝试以下语法（并添加下拉元素ID dropdown_status）

$(document).on("change", "#dropdown_status", function() {
            var tr = $(this).closest('tr');
            var bestell_id = $(this).attr('id');
            $.ajax({
                type: 'POST',
                url: '/files/ajax/wm_change_status_dt.php',
                data: {
                    id_bestell: bestell_id,
                    id_status: $(this).val()
                },
                success: function(data) {
                    tr.addClass('dropdown_anim');
                    tr.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
                        tr.removeClass('dropdown_anim');
                    });
                },
                error: function(jqXHR, status, err) {
                    alert(status + ': ' + err);
                }
            });
        }

Answer 2

好的，得到了：原来，一切都按原样运作。唯一的问题是css代码，当tablerow悬停时触发（更改它的背景颜色）。因此，绿色发光效果不可见，或者仅在行失去焦点时才可见。

css动画仅在元素失去焦点时触发

2 个答案: