CODEWITHSUNDEEP
jqueryjquery-pluginsjquery-animatemouseeventbackground-color
Majid
Majid

Reputation: 14243

Animate() not work when I have mouseover event

I have this code for contextMenu that animate color of row when row deleted but when I add mouseout and mouseover parts to code ,color of deleted row no more changed:

$(function () {
$('.users').contextMenu({
selector: 'tr',
callback: function (key, options) {
    if (key == 'delete') {
        if (confirm(" Are you sure?")) {
            $.post("../Actions/Delete.ashx", { type: "user", id: $(this).attr('id') });
            $(this).animate({ backgroundColor: '#FF80FF' }, 1000);
        }
    }

},
items: {
    "edit": { name: "edit" },
    "delete": { name: "delete" }
}
});
//newly added part
$('tr').mouseover(function () {
    $('td', this).animate
({ backgroundColor: "#80FF00" }, 300);
});

$('tr').mouseout(function () {
    $('td', this).animate
({ backgroundColor: "white" }, 300);
});
//till here
});

I see this error in consol after delete confirm:

[13:08:10.282] no element found @localhost:1299/Actions/Delete.ashx:1

where is my wrong?

Upvotes: 0

Views: 76

Answers (1)

A. Wolff
A. Wolff

Reputation: 74420

Try to use mouseenter instead ,and stop() method :

{ to animate color, I think you need to include a plugin which support it, as jquery UI}

$('tr').mouseenter(function () {
    $(this).find('td').stop().animate({
        backgroundColor: "#80FF00"
    }, 300);
}).mouseout(function () {
    $(this).find('td').stop().animate({
        backgroundColor: "#ffffff"
    }, 300);
});

Upvotes: 1

Related Questions