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

Question

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

感谢您的帮助！

HTML：

<div id="main">
    <div id="trigger_left">
        <img class="arrow_small" src="images/left_small.png" alt="slide menu out" />
    </div>
    <div id="trigger_right">
        <img class="arrow_small" src="images/right_small.png" alt="slide menu in" />
    </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);
        }

    );
});

Answer 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);
    }

);