Question

好吧所以我是javascript的新手，但是我可以很好地处理jquery ...但是jquery在一个小的移动网络体验上真的很重......有时候它甚至太多了。

所以我有这个代码只是弹出我的菜单栏，我想知道是否有任何轻松的方法来解决这个问题？

$(function() {
    $('div.menu').hide();
    $("img#menu").click(function () {
          $("div#menu").toggle("slide", {direction: "right"}, 500);
    });
});

Answer 1

查看您的代码，我会指出以下内容（请参阅注释）：

$(function() {
    // here you are searching by class name, that is going to eat CPU
    $('div.menu').hide();
    $("img#menu").click(function () {
        // here you are doing a JavaScript animation, eating more of the CPU
        $("div#menu").toggle("slide", {direction: "right"}, 500);
    });
});

使用CSS而不是JavaScript背负本机代码而不是解释JavaScript。

另一个技巧是许多移动设备都会进行3D CSS过渡（因为3D用于执行手机自己的UI使用的翻转和滑动功能）。因此，使用3D过渡将使您从引擎中获得更多的vroom。

使用CSS的代码的jsFiddle在这里：

http://jsfiddle.net/8dQMu/

CSS转换的一个很好的介绍在这里：

http://css3.bradshawenterprises.com/transitions/#how2use

Answer 2

你可以使用纯CSS和没有任何JavaScript来模拟菜单，只需编写一个css选择器，用于鼠标悬停你要通过它显示菜单的项目，但这样你就不能有像幻灯片这样的效果。要创建这种效果，你应该在jQuery中阅读它们的代码并在JS中实现它们。其他东西也可以使用jquery的源代码来处理，但是对于选择器（比如'div.menu'）你可以使用来自Sizzlejs.com的Sizzle这个库非常小（4k gzipped和minified）并且它的选择器引擎可以做任何事情jQuery可以（实际上jQuery内部使用Sizzle）

Jquery为小型设备的javascript，需要轻量代码

2 个答案: