Jquery анимация с использованием animate ()

Question

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

    <script type="text/javascript">
$("a.background_btn").click(function(ev){
    ev.preventDefault();
//  alert("hello");
    var url = $(this).attr("href");
//  alert(url);
    $.ajax ({
        url : url, 
        type: "POST",
        success : function (data) {
            $('#wrapper').css('background', 'url(/media/uploads/backgrounds/'+(data)+')');
            $('#wrapper').css('background-position', '-1000px 0px');
            $('#wrapper').css('background-repeat', 'no-repeat');
            $('#wrapper').animate({backgroundPosition: '0px 0px'}) 
        }
    })
});

Answer 1

Исходя из вашей дополнительной заметки, контейнер может иметь только один фон за раз, поэтому, когда вы устанавливаете фон в jquery, вы также удаляете старый фон.

Чтобы получить нужный эффект, вам нужно будет либо вставить дополнительный элемент «около» #wrapper и вставить его внутрь, либо сшить фоны вместе в виде спрайтового изображения, а затем вы можете передвигать один фон как необходимо.

То есть, если вы хотите, чтобы новый фон буквально "выталкивал" старый. Если вы согласны с тем, что старый фон полностью исчез, а затем - новый, точка Брэндона может быть самой легкой.

Answer 2

до изменения фона с помощью этой строки

$('#wrapper').css('background', 'url(/media/uploads/backgrounds/'+(data)+')');

анимируйте исходный фон в нужном вам направлении.

Answer 3

Что не работает с этим? Это просто ничего не делает? Если это так, то вы, вероятно, просто запускаете свой код, который прикрепил обработчик слишком рано (до того, как DOM будет готов), поместите свой код в обработчик для этого события, например так:

$(document).ready( function() {
  .. your code here ...
} );