Question

我的页面上有一个菜单，每个按钮都附有一些 jquery 动画。我正在使网站响应，并希望在调整窗口大小时删除所有 Jquery 动画，并添加单独的CSS3动画（以获得更好的移动性能）。

我尝试在按钮上切换功能的方法是删除与该按钮关联的桌面类并添加移动类，从而删除桌面类中关联的任何 jquery 函数并添加移动类中的css3函数。

到目前为止，这是我的代码：

$(window).resize(function() {
  if ($(window).width() <= 900) {
    $(".aboutbutton").toggleClass("aboutbuttondesktop");
  }
});

因此，当我成功删除桌面类时，.animate函数仍然存在。如何删除此类和处理程序+添加我的新类和处理程序？有一个搜索回合和一些关于传播的文档，但

我不确定这是否是问题而且

无法成功实施停止传播代码。

 $('.aboutbutton').on("click", ".aboutbutton", function () {

    $(".arrow-up").animate({
        borderBottomColor: "rgb(37,164,171)"
    },850);

 $(".topnavi").animate({
        "background-color": "rgb(37,164,171)"
    },850);


                $(".headercurrent").animate({
                  "margin-left":"147px",
                  "background-color": "rgb(37,164,171)", 
                 width: 92

                },850,"easeInOutQuint");

    $('.homecontainer,.aboutcontainer,.contactcontainer,.musiccontainer,.portfoliocontainer,.backgroundimage').removeClass('elementhovered');       


    $(".backgroundimage").fadeOut(800);
    setTimeout(function () {
        $(".backgroundimage").fadeIn(800);
        }, 800);


    setTimeout(function () {
    $('.backgroundimage').css({
        "background-image": "url(Aboutmeblur.jpg)",
            'background-size': "cover"
    });
    $('.backgroundimage').css({
        "background-repeat": "no-repeat"
    });
    }, 800);
    //fades unwanted pages
    $('.homecontainer,.musiccontainer, .portfoliocontainer, .contactcontainer').fadeOut({
        queue: false,
        duration: 700
    });

    //animates up unwanted pages
    $('.homecontainer, .musiccontainer, .portfoliocontainer, .contactcontainer').animate({
        'margin-Top': "-1000px"
    }, 400, 'easeInBack');

    //brings in selected page with a 0.7 second pause       
    setTimeout(function () {
        $('.aboutcontainer ').fadeIn({
            queue: false,
            duration: 100
        });
        $(".aboutcontainer").animate({
            marginTop: "115px"
        }, 1200, 'easeOutQuint');
    }, 700);
});

$('.aboutbutton').one("click", function () {
    setTimeout(function () {
        $(".aboutcontainer").load("about.php");
    }, 1200);
});

Answer 1

您的delegated event应该更像这样：

$("body").on("click", ".aboutbutton", function(){
    //...
});

应该重新调整你的resize事件以相应地替换类：

$(window).resize(function() {
  if ($(window).width() >= 900) {
      $(".aboutbutton").removeClass("aboutbutton").addClass("aboutbuttondesktop");
  } else {
      $(".aboutbuttondesktop").removeClass("aboutbuttondesktop").addClass("aboutbutton");
  }
});

最后，如果浏览器已经在你的900px断点下/上，你应该调用你的resize事件。

$(window).resize();

这是一个演示：http://jsfiddle.net/Lkx4pa0z/
调整大小以查看课程更改。点击它...只有.aboutbutton可点击。

Answer 2

如果我理解正确，您希望将大量动画工作量转移到css，但您又担心为IE9用户提供支持。如果我做对了，您可以考虑在css中制作所有动画，然后有条件地加载一个单独的javascript文件作为那些浏览器不支持css过渡/变换/动画的人的后备。

这就是原因：

维护起来会容易得多。
除少数特定地理位置或情况外（例如，如果您的大部分用户位于亚洲，或者您正在构建主要由商业用户[特别是美国公司]访问的网站/应用程序），绝大多数您的用户将使用现代浏览器。使用额外的javascript或所有桌面用户使用效率较低的jQuery动画惩罚所有网站访问者是没有多大意义的。
在某些时候，可能在不太远的未来，由于使用量减少，IE9对你来说将变得不重要。如果您已完成分离代码和动画的工作，则只需删除条件加载，而不是再次重构所有内容。
你不必在resize（）上做任何事情。在调整大小事件发生时，大多数情况下会反复调整大小。在这个事件上运行代码效率不是很高，所以如果你能避免它，那就更好了。

为IE完成此操作的一种简单方法是使用条件注释：

<!--[if lte IE 9]>
<script type="text/javascript" async src="your-jQuery-Animation-Fallback.js"></script>
<![endif]-->

如果浏览器是＆＃39; lte＆＃39;这只会加载javascript文件。或者小于或等于IE 9。

如果您想要更广泛的覆盖范围，您可以使用像Modernizr这样的库，并进行特定的功能检测，然后使用内置的加载方法来添加您的jQuery回退。如：

Modernizr.load({
  test: Modernizr.csstransitions, //or whatever you need support for
  nope: 'your-jQuery-Animation-Fallback.js'
});

这可能会让您支持Opera-mini或旧版Android（ca.v2.3）等浏览器。

同样，如果您不想使用Modernizr，但仍想进行功能检测，则可以创建自己的功能。值得注意的是，对matchMedia和css转换，转换和动画的支持都很好地对齐。因此，您可以通过使用它来运行测试来利用这一事实，如果是真的，则使用jQuery的$ .getScript方法加载脚本：

if(typeof window.matchMedia == 'undefined') {
  $.getScript( 'your-jQuery-Animation-Fallback.js' );
};

我知道这个问题已经得到了解答，我知道我可能会因为没有回答被问到的问题而被串起来。＆＃34;尽管如此，我认为值得分享。

Jquery更改类仍然保持功能

2 个答案: