CODEWITHSUNDEEP
jqueryanimationsvg
user1251258
user1251258

Reputation: 1

How can i improve svg animation performance using jQuery SVG plugin

I am building my first javascript project for my band's website, and I am currently trying to increase the performance of an svg-based animation, (specifically the performance of my click event). You can view the page here: http://djangotheband.com/specialLink.html I am using Keith Wood's jQuery SVG plugin to generate the svg element and I use his appending animation plugin to animate the cloud. I use css to add the color to the cloud. Here is the code that does the animation:

$('#svgScape').mouseenter(function () {

    //lightning strike on click                                     
    $('polygon').click(function () {

        $('#lightning').animate({svgOpacity: 1.0}, 150);
        $('#lightning').animate({svgOpacity: 0.0}, 15);
        });

    //animate cloud when user rolls over it
    $('#cloud > polygon').mouseenter(function () {
        //sets the svg opacity to 0%
        $(this).animate({svgOpacity: 0.0}, 100);

    }).mouseleave(function () {
        //sets the svg opacity back to 100%
        $(this).animate({svgOpacity: 1.0}, 400);
        });

}).mouseleave(function () {});

As I said, this is my first project, so a lot of this is very new to me. Please give me any suggestions you may have for improving the performance of my animation, and if you need more details please let me know. Thanks!

Upvotes: 0

Views: 688

Answers (1)

Robert Longson
Robert Longson

Reputation: 124049

If you can switch from opacity to fill-opacity (possibly together with stroke-opacity) you will likely see better performance. In the Keith Woods plugin the SVG fill-opacity property seems to be called svgFillOpacity.

Upvotes: 1

Related Questions