Multiple callbacks when using Quicksand

Question

I'm using Quicksand for a sortable portfolio page and need to remove the left padding of every third element using nth-child also I have to add a mouseover and mouseout effect. This is what I have at present:

$holder.quicksand($filteredData, {
    duration: 200,
    easing: 'easeInOutQuad'
}, function () {
    $("#center_content .portfolio .tiles_holder .four img").mouseover(function () {
        $(this).fadeTo("fast", 0.3, function () {
            $('ul.tiles_holder li:nth-child(3n+1)').css("marginLeft", "0");
        });
    }).mouseout(function () {
        $(this).fadeTo("fast", 1, function () {
            $('ul.tiles_holder li:nth-child(3n+1)').css("marginLeft", "0");
        });
    });
});

But what happens is the margin isn't removed until the mouseover/out event occurs. How can I improve the code?

Answer 1

Since you didn't post any html, it is hard to say exactly but it seems like you need to change the quicksand callback to this:

$holder.quicksand($filteredData, {
    duration: 200,
    easing: 'easeInOutQuad'
}, function () {

   $('ul.tiles_holder li:nth-child(3n+1)').css("marginLeft", "0");

    $("#center_content .portfolio .tiles_holder .four img").mouseover(function () {
        $(this).fadeTo("fast", 0.3);
    }).mouseout(function () {
        $(this).fadeTo("fast", 1);
    });
});