Question

我希望在一个小搜索表单中有两种状态：隐藏和显示。

在隐藏中，我想创建一个:hover效果，但CSS转换似乎与稍后应用的jQuery函数冲突。所以我用jQuery创建了它。

现在，当点击调用“显示”的替代状态时，我希望:hover效果完全消失。我尝试通过删除标识:hover效果元素的CSS类，但这不起作用。更准确地说：这是一个彻头彻尾的悲剧。在搜索框中飞行时，:hover效果甚至会发生！

我认为jQuery不会在.on('click'以某种方式更新其DOM的表示形式，因此当删除其类时，“mouseenter”事件处理程序不会与form input分离。但这只是一个疯狂的猜测。

有人建议如何达到预期的效果吗？它也应该是可逆的，因为我想让访问者在搜索框的隐藏状态和显示状态之间切换。

我写了这个jsfiddle。基本脚本是

$(function(){ // CSS TRANSITION EFFECT IN $('form.hidden').on('mouseenter',function(){ $(this).animate( {'right':'-8em'},{duration:200,queue:false}); }) // CSS TRANSITION EFFECT OUT $('form.hidden').on('mouseout',function(){ $(this).animate( {'right':'-9em'},{duration:200,queue:false}); }) //FLY IN ON CLICK, REMOVE TRANSITION EFFECT $('form.hidden').on('click',function(){ $(this) .removeClass('hidden') .animate({'right':'2em'},1000); }); });

Answer 1

您需要使用event delegation，因为目标元素选择器必须动态评估

$(function () {

    // CSS TRANSITION EFFECT IN
    $(document).on('mouseenter', 'form.hidden', function () {
        $(this).animate({
            'right': '-8em'
        }, {
            duration: 200,
            queue: false
        });
    })

    // CSS TRANSITION EFFECT OUT
    $(document).on('mouseout', 'form.hidden', function () {
        $(this).animate({
            'right': '-9em'
        }, {
            duration: 200,
            queue: false
        });
    })

    //FLY IN ON CLICK, REMOVE TRANSITION EFFECT
    $(document).on('click', 'form.hidden', function () {
        $(this)
            .removeClass('hidden')
            .animate({
            'right': '2em'
        }, 1000);
    });
});

通过删除点击类来禁用jQuery效果

1 个答案: