jquery - SVG 的脚本有效，但不能作为回调

Question

我正在处理带有内联 svg 的 html 页面。 svg 有一个“隐藏”类，g 的第一个子类有一个“frametoMove”类

我正在尝试使用 Jquery 将类更改为名为“blackframe”的类。该类有一个将第一个子 g 元素旋转 20 度的 css 动画。

我可以使用 .attr() 函数使它工作，但它仅在它遵循隐藏整个 svg 代码的函数(因此给它类“隐藏”)时才起作用

 $(document).ready(function() {
        /* Every time the window is scrolled ... */
        $(window).scroll(function() {
            /* Check the location of each desired element */
            $('.hideme').each(function(i) {
                var bottom_of_object = $(this).offset().top + $(this).outerHeight();
                var bottom_of_window = $(window).scrollTop() + $(window).height();
                /* If the object is completely visible in the window, fade it it */
                if (bottom_of_window > bottom_of_object) {
                    $(this).animate({
                            'opacity': '1'
                        }, 2000);
                        //works this way, but adds attr to all g:first-child elements at the same time
                            $('.hideme').children('g:first-child').attr("class", "frametoMove blackframe");

                };
            });
        });
        });    
$(document).ready(function() {
        /* Every time the window is scrolled ... */
        $(window).scroll(function() {
            /* Check the location of each desired element */
            $('.hideme').each(function(i) {
                var bottom_of_object = $(this).offset().top + $(this).outerHeight();
                var bottom_of_window = $(window).scrollTop() + $(window).height();
                /* If the object is completely visible in the window, fade it it */
                if (bottom_of_window > bottom_of_object) {
                    $(this).animate({
                            'opacity': '1'
                        }, 2000),
//doesn’t work as callback

                        function() {
                            $('.hideme').children('g:first-child').attr("class", "frametoMove blackframe");
                        };
                };
            });
        });
        });   

Answer 1

当设置 class 时，您要对所有 hideme 元素的第一个子元素进行设置。将代码更改为

 $(this)
   .children('g:first-child')
   .attr("class", "frametoMove blackframe");

由于早期的右括号，回调不起作用。改为

$(this).animate(
   {'opacity': '1'}, 
   2000,
   function() {
     $(this)
     .children('g:first-child')
     .attr("class", "frametoMove blackframe");
   });