Question

我有这个代码，我用同一个类填充来自我的数据库的帖子。这将产生多个int slash_cnt = 0; int i = 0; for (i = 0, page[i] != '\0', i++) { if (strcmp(&page[i], "/")) { slash_cnt++; } }

<p class="body">{{ $post->body }}</p

我有一个编辑模式，用户可以编辑帖子并保存更改。单击按钮后，我想使用js或jquery更改背景颜色（淡化效果）。

这是我的代码，其中特定@foreach($posts as $post) <article class="post" data-postid="{{ $post->id }}"> <p class="body">{{ $post->body }}</p> <div class="info"> Posted by {{ $post->user->first_name }} {{ $post->user->last_name }} on {{ $post->created_at->diffForHumans() }} </div> </article> //Show modal button here @endforeach背景颜色发生变化，没有褪色效果。

<p class="body">{{ $post->body }}</p>

如何将.effect（）函数添加到我的代码或任何东西？ http://api.jqueryui.com/effect/

Answer 1

您可以使用CSS执行transition，只使用JavaScript添加/删除类。例如，请考虑以下代码段。当然，您可以根据自己的喜好更改时间。也可以在各种different ways（more details）中进行背景转换。

＆＃13;

$('.post').on('click', function() {
  var $post = $(this);
  $post.addClass('highlight');
  setTimeout(function() { $post.removeClass('highlight'); }, 400);
});

＆＃13;

.post {
  display: inline-block;
  vertical-align: top;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #444;
  text-align: center;
  transition: background-color .3s;
}

.post.highlight {
  background-color: #ffb457;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">Click me!</div>
<div class="post">Or me!</div>
<div class="post">Or me, maybe...</div>

＆＃13;

Answer 2

这个确切的功能（3秒亮以突出显示消息）在jQuery UI中实现为高亮效果

http://docs.jquery.com/UI/Effects/Highlight

颜色和持续时间是可变的。

示例代码使用突出显示效果切换div。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>highlight demo</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
    <style>
    #toggle {
        width: 100px;
        height: 100px;
        background: #ccc;
    }
    </style>
    <script src="//code.jquery.com/jquery-1.12.4.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>

    <p>Click anywhere to toggle the box.</p>
    <div id="toggle"></div>

    <script>
    $( document ).click(function() {
        $( "#toggle" ).toggle( "highlight" );
    });
    </script>

</body>
</html>

Answer 3

我找到了解决问题的方法。我想念这个。我刚刚将这行代码添加到我当前的js。

$(postBodyElement).effect("highlight", {color: '#eff0f1'}, 5000);

所以这是我的最终代码：

var postBodyElement = event.target.parentNode.parentNode.childNodes[1];
$('#modal-save').on('click', function() {
$.ajax({
    method: 'POST',
    url: url,
    data: {body: $('#post-body').val(), postId: postId, _token: token}
})
.done(function (msg) {
    //console.log(JSON.stringify(msg));
    $(postBodyElement).text(msg['new_body']);
    $(postBodyElement).effect("highlight", {color: '#eff0f1'}, 5000);
    $('#edit-modal').modal('hide');
});
});

具有相同类别的特定项目的褪色背景颜色

3 个答案: