Question

我正在尝试使用伪递归函数在Jquery上对列表应用很酷的动画效果。

对于第一个项目非常有效，但在第一个循环之后，选择this的{{1}}变为#column-left section，所以当然，该函数找不到下一个li因为它已经在里面了。一旦“这个”改变了，或者做一些不同的事情，我有办法回到原来的li:hidden吗？

this

非常感谢你的帮助。

Answer 1

.fadeIn()在父mouseenter元素上触发section事件后如何：

$("#column-left section").mouseenter(function () {
    $(this).find('ul li:hidden:first').delay(500).fadeIn(function () {
        var $this = $(this);

        //check to make sure there are more hidden `<li>` elements
        if ($this.siblings('li:hidden').length > 0) {

            //trigger a `mouseenter` event on the parent `section` element to continue the queue
            $this.parents('section').trigger('mouseenter');
        }
    });
});

以下是演示：http://jsfiddle.net/bhTnL/2/

Answer 2

您可以使用.end()：

$(this)
    .find('ul li:hidden:first')
    .delay(500)
    .fadeIn(fadeItem)
    .end(); // returns to first selector

但实际上你并不需要这样做。要选择下一个隐藏的li，请执行以下操作：

$(this)
    .find('ul li:hidden:first')
        .delay(500)
        .fadeIn(fadeItem)
    .closest("li:hidden")
        .delay(500)
        .fadeIn(fadeItem);

Answer 3

每个函数都可以访问call方法，该方法允许您传入this参数。我在这里用它重写了原始解决方案：

$("#column-left section").mouseenter(function fadeItem(){
    $(this).find('ul li:hidden:first').delay(500).fadeIn.call(this, fadeItem);
});

Answer 4

好的，我找到了更好的方法：

$(this).find('ul li:hidden:first').delay(100).show("fast",function(){
    $(this).next(':hidden').show("fast",arguments.callee);  
});

只需使用next()（more info）选择下一个li，然后使用arguments.callee调用函数itselt（more info）

下面给出了完整的以下脚本来显示列表并隐藏它：

//show
$("#column-left section").mouseenter(function(){
    $(this).find('ul li:hidden:first').delay(100).show("fast",function(){
         $(this).next().show("fast",arguments.callee);  
    });
});

//hide
$("#column-left section").mouseleave(function(){
     $(this).find('ul li:visible:last').delay(100).hide("fast",function(){
          $(this).prev().hide("fast",arguments.callee); 
     });
});

Jquery - 具有“this”元素的伪递归函数

4 个答案: