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

this内部setTimeoutはグローバル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タイムアウト関数の前に、変数を定義し、$(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 に答える