jQuery 为 div 设置动画，同时淡入和淡出触发器

Posted 2023-05-08

【中文标题】jQuery 为 div 设置动画，同时淡入和淡出触发器

【英文标题】：jQuery animate a div while subsequently fading triggers in and out

【发布时间】：2011-06-30 06:46:44

【问题描述】：

我有一个菜单栏，当单击图像时会在页面上滑动，当单击备用图像时会向后滑动。我想包括淡出刚刚点击的图像和淡入未点击的图像，因为菜单栏是动画的。我确信这可以通过动态函数来完成..但这超出了我的理解。

感谢您的帮助！

html：

<div id="main">
    <div id="trigger_left">
        <img class="arrow_small" src="images/left_small.png"  />
    </div>
    <div id="trigger_right">
        <img class="arrow_small" src="images/right_small.png"  />
    </div>
    <div id="slider">
         <p>This is Content</p>
    </div>
</div>

javascript：

$(document).ready(function() 
    //Page Load
    $('#slider').css(
        width: '30px'
    );
    // Navigation drop down menu
    $('#trigger_left').click(function() 
        $('#slider').animate(
            width: '100%'
        , 1500);
    );
    $('#trigger_right').click(function() 
        $('#slider').animate(
            width: '30px',
        , 1500);
        

    );
);

【参考方案1】：

首先您可能想要缓存 jQuery 对象以提高性能和可读性，然后您可能想要添加 .stop() 方法来停止当前动画并从当前点触发新动画，而不是看到动画排队和循环并且表现得很奇怪。然后在点击发生时在触发器上添加.fadeOut() 和.fadeIn()。啊，你应该习惯使用.bind() 而不是.click()、.keydown() 等，因为这些是bind 方法的别名，所以直接使用bind 更有效。除此之外，使用带有绑定等的事件命名空间更容易。 Check the jQuery API!

var trigger_left = $('#trigger_left'),
    trigger_right = $('#trigger_right'),
    slider = $('#slider');

slider[0].style.width = "30px"; // and use native js where you can 
        //- it speeds things up and prepares you for when you can't use jQ :)

trigger_left.bind('click', function() 
    trigger_left.stop().fadeOut();
    trigger_right.stop().fadeIn();
    slider.stop().animate(
        width: '100%'
    , 1500);
);
trigger_right.bind('click', function() 
    trigger_right.stop().fadeOut();
    trigger_left.stop().fadeIn();
    slider.stop().animate(
        width: '30px',
    , 1500);
    

);

【讨论】：

.bind('click') 和 .click() 之间的速度差异可以忽略不计。此外，尽可能不要使用原生 js，使用在速度/可读性方面最佳的。 slider[0].style.width 不会为您节省一毫秒的时间。

@Alexey 首先 bind 有更多的功能而且速度更快，反对它的使用是愚蠢的。其次jsperf.com/jq-css-vs-dom-style 在你说话之前检查测试 - 即使与 jQuery 混合使用原生 JS/DOM 操作也快得多。事情加起来，有点在这里，突然你的页面在糟糕的上网本和旧电脑上运行得更好——不是每个人都是核心 i7 的开发人员——我正在分享关于良好实践的提示，所以如果你提供，请不要反对那些没有更好的交换。

@Alexey Lebedev：希望你确实运行了这些测试——在 FF3.6 上 jQuery/CSS 操作比原生慢 93%，在 IE 上差异会更大——你应该重新审视你的方法网络开发或至少保留给自己 - 非常喜欢

@Tom "jQuery/CSS 操作比原生慢 93%" - 实际上浏览器重排需要大部分时间，但是好的，让我们就这一点达成一致。但是我们在这里只讨论一个调用，而不是在 mousemove 处理程序中的数千个调用（我自己很少使用 jQuery）。你提倡的是过早的优化。我无意将你带到我的观点，只是解释这不是事情加起来的情况。为什么要牺牲可读性来获得令人怀疑的速度增益？

@Tom 要点和优雅的代码。实施后，我对其进行了一些修改。设置它，使淡入的箭头等到滑块的动画完成。感谢您的时间和精力！