1

我正在尝试结合 mouseenter、live 和 setTimeout 函数来制作一些动画

$(".kundenList li").live("mouseenter", function(){
    if ($(this).children().length > 0) {
        $(this).data('timeout', setTimeout( function () {
            $(this).children("div.description").css({opacity: '0'});

            $(this).children("div.blacklayer").animate({
                opacity: '0.85'
            }, 300);

            $(this).children("div.description").animate({
                top: "-=200px",
                opacity: '1'
            }, 300).css( 'cursor', 'pointer' );

            $(this).addClass("activeLI");
        }, 300));
    }
});

html看起来像这样

<ul class="kundenList">
    <li>
        <img src="t3.png" class="kundenImg" />
        <div class="blacklayer" style="opacity: 0;"></div>
        <div class="description">
            <h3>Title</h3>
            <p>Description</p>
        </div>
    </li>
</ul>

由于我发布的问题脚本显然不起作用:)。有谁知道为什么？谢谢。

PS我需要实时功能，因为我正在通过ajax加载新内容

4

2 回答 2

3

thisinsidesetTimeout指的是全局window对象。将引用存储this在临时变量中，如下所示。小提琴：http: //jsfiddle.net/de7Fg/

$(".kundenList li").live("mouseenter", function(){
    var $this = $(this); //Reference to `$(this)`

    if ($this.children().length > 0) {
        $this.data('timeout', setTimeout( function () {
            // $this points to $(this), as defined previously
            $this.children("div.description").css({opacity: '0'});

            $this.children("div.blacklayer").animate({
                opacity: '0.85'
            }, 300);

            $this.children("div.description").animate({
                top: "-=200px",
                opacity: '1'
            }, 300).css( 'cursor', 'pointer' );

            $this.addClass("activeLI");
        }, 300));
    }
});
于 2011-11-01T09:34:32.100 回答
2

您无法li使用this内部超时功能访问。在 timeout 函数定义一个变量之前，对其进行赋值$(this)并在函数中使用它，如下所示（示例）：

$(".kundenList li").live("mouseenter", function(){
    var $this = $(this);
    if ($this.children().size() > 0) {

        $this.data('timeout', setTimeout( function () {
            $this.children("div.description").css({opacity: '0'});

            $this.children("div.blacklayer").animate({
                opacity: '0.85'
            }, 300);

            $this.children("div.description").animate({
                top: "-=200px",
                opacity: '1'
            }, 300).css( 'cursor', 'pointer' );

            $this.addClass("activeLI");
        }, 300));
    }
});
于 2011-11-01T09:34:37.623 回答