为什么我不能在这个动画上调用回调

时间:2012-08-28 00:20:36

标签: jquery jquery-animate

我可能做了一些愚蠢的事情,但出于某种原因我今天想不到。

我有三个div,他们都有一类“staff_member”。单击div时,其宽度应展开,其他两个div缩小。如果单击另一个div,则此div现在应该展开,而其他div则缩小。一切正常。但是,我想要一个回调函数,所以如果再次单击展开的div,它应该将所有三个div返回到正常大小(缩小先前扩展的div并增加收缩的div。)

如果我添加一个回调它什么都不做,如果我尝试将它作为一个单独的函数运行,扩展的div会缩小然后再次展开。

继承我的代码:

jQuery(document).ready(function() {

    var regionWidth = jQuery(".region-panels").width();
    jQuery(".staff_wrapper").css("width",regionWidth*0.84);

    var halfRegion = regionWidth/2;
    var howMany = jQuery(".staff_member").length;
    var makeMeThin = halfRegion/howMany;

    jQuery(".staff_member").css("width",makeMeThin);
    jQuery(".staff_member img").css("cursor", "pointer");

    jQuery(".staff_member").click(function () {
        jQuery(".expanded").removeClass("expanded");
        jQuery(this).addClass("expanded");
        jQuery(".staff_member").not(this).animate({"width":"5%"}, function(){
            jQuery(".expanded").stop().animate({"width":"84%"});
        });
    }, function(){
        jQuery(".staff_member").animate({"width":makeMeThin});
    });

});

1 个答案:

答案 0 :(得分:0)

要点击展开的部分,执行不同的操作,您只需要在点击处理程序中检查点击的项目是否已经展开:

jQuery(".staff_member").click(function () {
    if (jQuery(this).hasClass("expanded")) {
        // clicked item already expanded, set all back to normal width
        jQuery(".expanded").removeClass("expanded");
        jQuery(".staff_member").animate({"width": "50%"});   // you add right code for setting to normal width
    } else {
        // clicked on item was not already expanded
        jQuery(".expanded").removeClass("expanded");
        jQuery(this).addClass("expanded");
        jQuery(".staff_member").not(this).animate({"width":"5%"}, function(){
            jQuery(".expanded").stop().animate({"width":"84%"});
        });
    }
});

你没有在你的代码中显示正常宽度是什么,所以我会留给你填写。