Sunday, March 12, 2017

Fading background color of specific item with same class

I have this code where I populate the post coming from my database with a same class.

@foreach($posts as $post)       
    <article class="post" data-postid="">
        <p class="body"></p>
        <div class="info">
            Posted by   on 
        </div>
    </article>
@endforeach

And I have a Edit modal where the user can edit the post and save changes. After the button click, I want to change the background color (fading effect) using js or jquery.

This is my code where the specific <p class="body"></p> background color change without fading effect.

$('#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']);
    $('#edit-modal').modal('hide');

    postBodyElement.style.backgroundColor = '#eff0f1';
    setTimeout(function() {
        postBodyElement.style.backgroundColor = 'white';
    }, 2000);
});
});

Any idea?



via J Alc

Advertisement