jquery .hover,然后单击.click来制作麻烦动画

时间:2013-03-22 19:46:46

标签: jquery click hover if-statement

更新:我已整合了我的代码,并尝试添加if / else语句。我仍然没有想出如何点击忽略mouseenter / mouseleave函数

$('#storybtn').on({
mouseenter:function(){
    $('#story')
        .stop()
        .animate({top:'405px'},'slow');
},
mouseleave:function(){
    $('#story')
        .stop()
        .animate({top:'435px'},'slow');
},
click:function(){
    var position = $('#story').css('top');
    if (position>'10px'){
    $('#story')
        .stop()
        .animate({top:'10px'},'slow');
        }
    else (position='10px'){
    $('#story')
        .stop()
        .animate({top:'435px'},'slow');
        }
    }
});

2 个答案:

答案 0 :(得分:1)

首先,新版本的jQuery不推荐使用.hover()的语法。其次,您需要在激活新动画之前停止其他动画,否则它将排队直到之前的动画完成。试试这个:

$('#storybtn').on({
    mouseenter:function(){
        $('#story')
            .stop()
            .animate({top:'405px'},'slow');
    },
    mouseleave:function(){
        $('#story')
            .stop()
            .animate({top:'435px'},'slow');
    },
    click:function(){
        $('#story')
            .stop()
            .animate({top:'10px'},'slow');
    }
});

这使用了.on()处理程序,这是.click().hover()的缩写。通过使用真实的东西,您可以合并代码。

答案 1 :(得分:1)

我为你创造了一个小例子:

Example Fiddle

为了避免点击发生后的mouseleave动画,我添加了一个类点击#story和一个if / else大小写以检查它或者在mouseleave之后删除它:

 $('#storybtn').on({
        mouseenter: function () {
            $('#story')
                .stop()
                .animate({top: '405px'}, 'slow');
        },
        mouseleave: function () {
            if (!$('#story').hasClass('clicked')) {
            $('#story')
                .stop()
                .animate({top: '435px'}, 'slow');
            } else {
                $('#story').removeClass('clicked')
            }
        },
        click: function () {
            var position = $('#story').css('top');
            if (position > '10px') {
                $('#story')
                    .addClass('clicked')
                    .stop()
                    .animate({top: '10px'}, 'slow');
            } else if (position === '10px') {
                $('#story')
                    .addClass('clicked')
                    .stop()
                    .animate({top: '435px'}, 'slow');
            }
        }
    });