jQuery - динамически чередовать источники изображений в анимированном div

Question

У меня есть меню, которое анимируется, чтобы скользить по странице, когда вызывается нажатием на изображение стрелки. Я хочу переключить стрелку на другой источник изображения после завершения анимации меню, а затем вернуться к исходному файлу после закрытия меню.

Лучший способ сделать это? Спасибо!

HTML:

<div id="slider">
     <div id="trigger_right">
          <img class="arrow_small" src="images/left_small.png" alt="slide menu out" />
     </div>
     <div class="trans" id="overlay"></div>
     <div id="content">
          <p>This is content</p>
     </div>
</div>

Javascript:

$(function() {
    $('#trigger_right').toggle(function (){
        $('#slider').animate({'width':'100%'}, 1500);
            $('.arrow_small').attr('src','images/right_small.png');
    }, function() {
        $('#slider').animate({'width':'30px'}, 1500);
            $('.arrow_small').attr('src','images/left_small.png');
    });
});

Answer 1

jQuery's .animate имеет обратный вызов, который вызывается после завершения анимации, так что вы можете использовать его для изменения изображений в соответствующее время:

$(function() {
    $('#trigger_right').toggle(function () {
        $('#slider').animate({'width':'100%'}, 1500, function() {
            $('.arrow_small').attr('src','images/right_small.png');
        });
    }, function() {
        $('#slider').animate({'width':'30px'}, 1500, function() {
            $('.arrow_small').attr('src','images/left_small.png');
        });
    });
});

Выше предполагается, что у вас есть только один .arrow_small элемент конечно.Было бы лучше использовать класс для стрелки и спрайт-лист для изображений, но для этого потребовалось бы только заменить $('.arrow_small').attr() части на $('.arrow_small').toggleClass(), как предлагает Роб.

Answer 2

Если я правильно понимаю, вы хотите, чтобы изображения изменялись только после завершения анимации меню.

Одним из способов, возможно, не самым лучшим, было бы заставить JavaScript, который изменяет атрибут src, появляться послеустановить период времени с помощью setTimeout ().Вместо:

$('.arrow_small').attr('src','images/right_small.png');

Вы бы получили:

setTimeout("toggleImages()", 1500);

function toggleImages(){
    // some code to toggle them
}

Я не проверял это, но попробуйте.Надеюсь, это поможет!

Answer 3

Я бы посоветовал вам настроить изображения в CSS как классы, а затем сделать что-то вроде:

.toggleClass("right-small left-small");