CODEWITHSUNDEEP
jqueryhtmlcss
Danil.B
Danil.B

Reputation: 900

Smooth scale animation JQuery

I'm trying to create a page that has a pointer down image,and when user enter's a cursor on it the list of products must be displayed and pointer will be compressed. And everything works fine except animation. I'm using JQuery methods:

    $(".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 is a div with pointer down, and I'm trying to scale it using css method but it scales without animation.I thought "transition": "all 0.5s" would do the trick, but it didn't. What I'm missing or how to make it smooth?.

Upvotes: 2

Views: 237

Answers (1)

Danil.B
Danil.B

Reputation: 900

I found the solution(thanks to Huangism). The solution is to add new css class to pointer down(which is going to be shrunk). So, I've changed JQuery script to this:

$(".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");
});

And I've changed css like this:

.shrunk_pointer_down{
    height: 1px;
    transition: all 0.5s;
    cursor:pointer;
}
.pointer_down{
    transition: all 0.5s;
    cursor:pointer;
}

Upvotes: 1

Related Questions