javascript - Font Awesome + Bootstrap 工具栏动画问题

Question

我正在通过 Kolor Panotour Pro(使用基于 xml 的代码“krpano”)构建 360 度全景。

当我导出我的元素时，我正在使用 Bootstrap html 模板构建，因此它具有漂亮的 ui 按钮。

默认的 Bootstrap 模板使用 Glyphicons 作为与 IE 不兼容的工具栏。

我已经切换到 Font Awesome，现在显示非常好，除了一个问题。

下面是工具栏的图片...

当您点击缩略图开关时，一排缩略图会从底部弹出。下图。

问题是，黑色工具栏应该在拇指行的正上方进行动画处理。

当存在使用字形的原始模板时，不会发生此问题。但是，一旦我将拇指切换按钮更改为 Font Awesome fa-eye，工具栏就不会移动。我知道我错过了某种行动呼吁，但我到处搜索但找不到。

这是我正在查看的一些代码...

眼睛按钮

<button     type="button"
                                class="btn btn-default btn-lg toggle-thumbnails"
                                data-toggle="tooltip"
                                data-placement="top"
                                title="Toggle thumbnails">
                                <i class="fa fa-eye" style="color: white;"></i>
                    </button>

自定义函数(可能与动画有关？)。我已经用 fa-eye 关闭了信息，因为它以前是旧的 glyphicon。

//Show Hide Thumbnails
        var toggleThumbnails = function(){
            jQuery('#thumbnailsDIV').toggle("slow", function() {
                if(jQuery(".toggle-thumbnails span").hasClass('fa-eye')) {
                    jQuery(".toggle-thumbnails span").removeClass('fa-eye').toggleClass('fa-eye-slash');
                    jQuery('#toolbar').animate({bottom:'175px'});
                    jQuery('.toggle-thumbnails span').css({color: fg2xLighter});
                }else{
                    jQuery(".toggle-thumbnails span").removeClass('fa-eye-slash').toggleClass('fa-eye');
                    jQuery('#toolbar').animate({bottom:'50px'});
                    jQuery('.toggle-thumbnails span').css({color: '#{{project.description.fgcolor}}'});
                }
            });
        };

Answer 1

查看代码，标签似乎是 <span>当你使用 Glyphicons 时，现在是 <i>按照 FontAwesome 的说明。

<i class="fa fa-eye" style="color: white;"></i>

这个选择器，求<span>一无所获

jQuery(".toggle-thumbnails span")

使用这个

if(jQuery(".toggle-thumbnails i").hasClass('fa-eye')) {

你还需要改变另一个span s 至 i

var toggleThumbnails = function(){
    jQuery('#thumbnailsDIV').toggle("slow", function() {
        if(jQuery(".toggle-thumbnails i").hasClass('fa-eye')) {
            jQuery(".toggle-thumbnails i").removeClass('fa-eye').toggleClass('fa-eye-slash');
            jQuery('#toolbar').animate({bottom:'175px'});
            jQuery('.toggle-thumbnails i').css({color: fg2xLighter});
        }else{
            jQuery(".toggle-thumbnails i").removeClass('fa-eye-slash').toggleClass('fa-eye');
            jQuery('#toolbar').animate({bottom:'50px'});
            jQuery('.toggle-thumbnails i').css({color: '#{{project.description.fgcolor}}'});
        }
    });
};

但我会减少 DOM 搜索并将其整理成这样:

var toggleThumbnails = function(){
    jQuery('#thumbnailsDIV').toggle("slow", function() {

        var $icon = jQuery('.toggle-thumbnails i'); // find once and re-use 
        var color; // alter this and make one call to update $icon later
        var bottom; // to remove duplicate code

        if ($icon.hasClass('fa-eye')) {
            bottom = 175;
            color = fg2xLighter;
        }else{
            bottom = 50;
            color = '#{{project.description.fgcolor}}';
        }

        // update the icon and toolbar
        jQuery('#toolbar').animate({bottom: bottom}); // doesn't need 'px'
        $icon.toggleClass('fa-eye fa-eye-slash').css({color: color});
    });
};