Question

我想提高网站的效果。该网站是使用多个height: 100%; width: 100%部分构建的，例如以下版本（乘以十次）：

<div id="fullpage">
    <div class="section active" id="f01">
        <span class="trigger">Button</span>
        <div class="example">Content</div>
    </div>
    <div class="section" id="f02">
        <span class="trigger">Button</span>
        <div class="example">Content</div>
    </div>
</div>

默认情况下会隐藏div.example，并会在fadeToggle上使用span.trigger显示。现在发生的事情是，在十个div中的每一个上div.example都会消失。

var start_action = function(){
    //a lot of random actions, for example this one:
    $('.example').stop().fadeToggle();
}

$('span.trigger').click(start_action);

这需要在移动设备上获得很多性能。

我想使用.section.active仅设置当前div的动画，然后在不使用动画的情况下切换每个其他div（以节省性能）。

最快，最干净的方法是什么？我是否必须创建两个函数start_action和start_action_no_animation并在.section.active触发一个函数，在另一个函数.section激发另一个函数？

如果我缓存选择器var example = $('.example', #fullpage)，我可以将此缓存选择器与$('.section.active).find(example)结合使用吗？

Check the jsfiddle

Answer 1

jQuery 为绝大多数浏览器做幕后动画，但
在动画中不那么好。由于良好的浏览器和快速机器，Velocity.js和Greensock 等库是。粗略地说，如果您利用CSS（3）动画功能，浏览器就足够了。

所以不是使用jQuery动画方法，你可以只使用CSS类，CSS3 transition和jQuery，而只是切换一个元素的类：

<强> jsBin demo

.section {height: 80px;} .trigger {cursor: pointer;} .content { opacity: 0; transition: opacity 1s; } .CSS3fadeIn{opacity: 1;}

// Cache: var $fullpage = $("#fullpage"); var $sections = $fullpage.find(".section"); var $content = $sections.find(".content"); // Store (temporary): // inside $visible we will store our visible el, // so we don't need to run over all our elements // and sniff for classes: var $visible = null; // (no need to cache .trigger if only used here) $sections.on("click", ".trigger", function(){ // Remove from $visible (if not null): if($visible) $visible.removeClass("CSS3fadeIn"); // Set a new visible element: $visible = $(this).next(".content"); // Use that $visible one now: $visible.addClass("CSS3fadeIn"); });

_{请注意，上面我在不透明度上使用了CSS3过渡。您可能想要做任何您需要的事情。（也可以使用不同的动画库，jQuery，CSS3和不同的设备进行测试）。}

缓存选择器仅在您计划在代码中的某个位置重复使用相同的选择器时，意味着：

$(".partyBrakers").remove(); // No need to cache those guys. We don't need them. // Some fun going on here...

缓存选择器可以提高速度，特别是当您经常运行的函数（如循环中）调用相同的元素时。

// Mean You: // Computer: setInterval( letsDance, 800 ); // "OK, let's do that dance" function letsDance() { $(".dancer").fadeToggle(); // "Wait, let me find dancers first. ugh.. OK guys, dance." }

// Good You: // Computer: var $dancers = $(".dancer"); // "Hi guys! Wanna dance?" setInterval( letsDance, 800 ); // "Let's dance!" function letsDance() { $dancers.fadeToggle(); // "You know the move! YEY" }

你明白了。

通过添加可变选择器 类向您的元素添加动态，有两种方式，更慢的方式和更快的方式方式。
缓慢的方法是将一个类分配给一个被点击的元素，而不是在某些时候你想要回忆这些元素：

var $danceFloor = $("#danceFloor"); var $dancers = $danceFloor.find(".dancer"); // some party with $dancers here... // At some point in time some $dancer can become a .tiredDancer $dancers.on("click", function(){ $(this).addClass("tiredDancer"); }); // and you meanly want to $("#button_kickTiredDancers").on("click", function() { $danceFloor.find(".tiredDancer").remove(); // Ohhh... OK, wait let me ask everyone.. });

以上，即使我们缓存了这些人，我们仍然需要找#danceFloor任何最终成为.tiredDancer的舞者。

更快的方法是拥有一个listOfTiredDancers数组，并将选定的元素放入其中：

var listOfTiredDancers = []; // ... $dancers.on("click", function(){ listOfTiredDancers.push( this ); });

你push一个疲惫的元素对象（this）进入该数组列表，并且在需要时你只会在该列表上行动：

$("#button_kickTiredDancers").on("click", function() { $( listOfTiredDancers ).remove(); // YEY! I know already who those are! });

防止＆＃34;在文档对象模型中找到那些＆＃34; （特别是如果你有大量的元素）。

Answer 2

@MarianRick：我在阅读你的问题后理解的是，你想要关闭所有其他的＆＃39; .example＆＃39;没有动画的块，当一个新的＆＃39; .trigger＆＃39;单击块。我修改了一下javascript来创建这个片段。它隐藏了所有其他的＆＃39;。示例＆＃39;当一个＆＃39; .trigger＆＃39;阻止点击。

关于优化，这有点优化，因为它不会切换每个＆＃39; .example＆＃39;阻止，这减少了DOM操作的数量。它也没有使用缓动/淡化动画，而关闭另一个打开的例子＆＃39;块。

我无法弄清楚那个＆＃39; .section.active＆＃39;选择器虽然。如果这不是你想要的，那么请提供更多细节，以便更清楚。

以下是我的片段：

＆＃13;

.trigger {
  cursor: pointer;
}
.example {
  display: none;
}
#fullpage {
  height: 100%;
  width: 100%;
  position: relative;
}
.section {
  height: 80px;
  width: 100%;
}
#f01 {
  background-color: red;
}
#f02 {
  background-color: blue;
}
#f03 {
  background-color: green;
}
#f04 {
  background-color: yellow;
}
#f05 {
  background-color: orange;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fullpage">
  <div class="section" id="f01">
    <span class="trigger">Button</span>
    <div class="example">Content</div>
  </div>
  <div class="section" id="f02">
    <span class="trigger">Button</span>
    <div class="example">Content</div>
  </div>
  <div class="section active" id="f03">
    <span class="trigger">Button</span>
    <div class="example">Content</div>
  </div>
  <div class="section" id="f04">
    <span class="trigger">Button</span>
    <div class="example">Content</div>
  </div>
  <div class="section" id="f05">
    <span class="trigger">Button</span>
    <div class="example">Content</div>
  </div>
</div>

＆＃13;

my_patch = patch('somelongmodulename.somelongmodulefunction')

@my_patch
def test_a(patched):
    pass

@my_patch
def test_b(patched):
    pass

＆＃13;

使用此选择器和多个动画提高性能

2 个答案: