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

);

jQuery为div设置动画，然后逐渐淡入触发器

1 个答案: