1

アイデアは、ホバーしたときにdivを少し下に移動し、クリックしてさらに下に移動してコンテンツを表示することです。問題は、divをクリックして下に移動すると、その上にホバーしなくなったため、ホバーされていないときに'閉じる機能が実行されることです。

$(function () {
    $('.more').hover(function () { //Open on hover 
        $('#pull_down_content').animate({
            'top': '-360px'
        }, 1000);
    }, function () { //Close when not hovered
        $('#pull_down_content').animate({
            'top': '-380px'
        }, 1000);
    });
});
$('.more').click(function () { //Move down when clicked
    $('#pull_down_content').animate({
        'top': '0px'
    }, 1000);
});
4

2 に答える 2

3

要素にクラスを配置して、クリックされたことを示し、そのクラスがある場合は閉じないでください。

$(function() {        
    $('.more').hover(function(){    //Open on hover 
           $('#pull_down_content').animate({'top':'-360px'},1000);
        },    
        function(){   //Close when not hovered
           if (!$('#pull_down_content').hasClass("expanded"))
               $('#pull_down_content').animate({'top':'-380px'},1000);    
        });
    });
    $('.more').click(function(){    //Move down when clicked
        $('#pull_down_content').addClass("expanded").animate({'top':'0px'},1000);
    });

もちろん、アイテムがクリックされた後、ホバーアニメーションをいつ元に戻すかを正確に決定するための別のトリガーが必要になります。それをどのように行うかは、達成したい効果によって異なります。

于 2012-06-23T19:45:37.797 に答える
1

問題は、divをクリックして下に移動すると、ホバリングしていないため、「ホバリングしていないときに閉じる」機能を実行することです。

私はそれを得るかどうかわからないのですか？バインドされたイベントを持つ要素が、アニメーション化している要素と同じではないことを知っていますか?

とにかく、多分このようなもの：

$(function() {
    $('.more').on('mouseenter mouseleave click', function(e) {
        if (!$(this).data('clicked')) {
            var Top = e.type==='mouseenter' ? '-360px' : e.type==='click' ? '0px' : '-380px';
            $('#pull_down_content').stop().animate({'top': Top}, 1000);
            if (e.type==='click') $(this).data('clicked', true);
        }else{
            if (e.type==='click') {
                $(this).data('clicked', false);
                $('#pull_down_content').stop().animate({'top': '-380px'}, 1000);
            }
        }
    });
});

フィドル

于 2012-06-23T20:16:47.890 に答える