Question

我尝试创建一个具有指针向下图像的页面，当用户在其上输入光标时，必须显示产品列表并压缩指针。一切都很好，除了动画。我使用的是JQuery方法：

    $(".product_picker").mouseenter(function () {
        $(this).parent(".catalog_element").css({"border": "2px solid #676f7c","border-radius": "3px"});
        $(this).find(".fb_content").css({"display": "block"});
        $(this).find(".pointer_down").css({"transition": "all 0.5s","cursor": "pointer","height": "1px"});
    });
    $(".catalog_element").mouseleave(function () {
        $(this).css("border", "0px solid #676f7c");
        $(this).find(".fb_content").css({"transition":"all 0.5s","display": "none"});
        $(this).find(".pointer_down").css({"transition": "all 0.5s","cursor": "pointer","height": "auto"});
    });

product_picker是指针向下的div，我试图使用css方法缩放它，但它没有动画缩放。我想＆＃34;转换＆＃34;：＆＃34;全部0.5s＆＃34 ;会做的伎俩，但它没有。我错过了什么或如何使它顺利？

Answer 1

我找到了解决方案（感谢Huangism）。解决方案是向指针向下添加新的css类（将缩小）。所以，我已经将JQuery脚本更改为：

User

我已经改变了这样的CSS：

$(".product_picker").mouseenter(function () {
    $(this).parent(".catalog_element").css({"border": "2px solid #676f7c","border-radius": "3px"});
    $(this).find(".fb_content").css({"display": "block"});
    $(this).find(".pointer_down").addClass("shrunk_pointer_down");
});
$(".catalog_element").mouseleave(function () {
    $(this).css("border", "0px solid #676f7c");
    $(this).find(".fb_content").css({"transition":"all 0.5s","display": "none"});
    $(this).find(".pointer_down").removeClass("shrunk_pointer_down");
});

平滑动画JQuery

1 个答案: