使用流沙时的多个回调答案

【问题标题】：Multiple callbacks when using Quicksand使用流沙时的多个回调
【发布时间】：2012-06-14 12:00:42
【问题描述】：

我将 Quicksand 用于可排序的投资组合页面，并且需要使用 nth-child 删除每三个元素的左侧填充，我还必须添加鼠标悬停和鼠标移出效果。这是我目前拥有的：

$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");
        });
    });
});

但是发生的情况是直到 mouseover/out 事件发生时边距才被删除。如何改进代码？

【问题讨论】：

您是否只是想删除独立于鼠标悬停/移出的每个第三个元素的左边距？你想在悬停开/关时做什么？
是的，我需要删除每个第三个元素的边距以进行正确布局，并且当鼠标悬停在图像上时，鼠标悬停/移出功能会显示有关项目的额外信息（信息在图像的背景中，因此降低不透明度使其可见）

标签： jquery callback quicksand

【解决方案1】：

由于您没有发布任何 html，因此很难准确地说，但您似乎需要将流沙回调更改为：

$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);
    });
});

【讨论】：

那行得通...我也尝试过失败： $("#center_content .portfolio .tiles_holder .four img").mouseover(function () { $(this).fadeTo( "fast", 0.3); }).mouseout(function () { $(this).fadeTo("fast", 1); }, function (){//第n个子代码}); ); 非常感谢！
去除剩余边距的部分需要在 mouseover/out 事件之外，因为它独立于它们。这些事件只是淡入淡出与剩余边距无关的图像。