Javascript/JQuery Множественная анимация непрозрачности элементов

Я пытаюсь создать анимацию, основанную на изображениях внутри div. Я хочу, чтобы третья часть изображений появилась, затем исчезла, затем появилась еще одна треть изображений и т. Д. Итак, я разделил изображения на 3 разных класса.Javascript/JQuery Множественная анимация непрозрачности элементов

Я исследовал немного об этом, и обнаружили, что лучше всего было бы, чтобы оживить непрозрачности, как показано в этой статье http://www.catchmyfame.com/2010/08/31/jquery-hide-vs-fadeout-vs-animate/

Проблема в том, когда я запускаю мой код, все анимации сразу бежать, и изображения не остаются на экране в течение достаточного количества времени. Любая помощь в правильном направлении будет оценена по достоинству.

Код на http://jsfiddle.net/vwrwsp62/1/

$(document).ready(function() { 
     $(".hardware > img").css("opacity", "0"); 
     setInterval(function() { 
      $('.show1').animate({opacity:1}, 1000) 
     }, 4000); 
     setInterval(function() { 
      $('.show1').animate({opacity:0}, 1000) 
     }, 1000); 
     setInterval(function() { 
      $('.show2').animate({opacity:1}, 1000) 
     }, 4000); 
     setInterval(function() { 
      $('.show2').animate({opacity:0}, 1000) 
     }, 1000); 
     setInterval(function() { 
      $('.show3').animate({opacity:1}, 1000) 
     }, 4000); 
     setInterval(function() { 
      $('.show3').animate({opacity:0}, 1000) 
     }, 1000); 
    });

редактирования: после некоторого ввода я пришел с какой-то код, который работает, хотя в конечном итоге немного случайных и неточным:

$(document).ready(function() { 
     $(".hardware > img").css("opacity", "0"); 
     setInterval(function() { 
      $('.show1').animate({opacity:1}, 1000).delay(18000); 
      $('.show1').delay(6000).animate({opacity:0}, 1000).delay(12000); 
      $('.show2').delay(7000).animate({opacity:1}, 1000).delay(11000); 
      $('.show2').delay(12000).animate({opacity:0}, 1000).delay(6000); 
      $('.show3').delay(13000).animate({opacity:1}, 1000).delay(5000); 
      $('.show3').delay(18000).animate({opacity:0}, 1000); 
     }, 0); 
    });

источник

2014-10-02 Tomás Antunes

вместо 'setInterval' вы можете передать функции для анимации, которая будет работать после конца анимации' $ .animate ({непрозрачности: 0}, 1000, функция() {// другой анимировать}) ' –

жаль , это не помогло мне. Проверьте изменение. –

Вы можете попробовать это. Я считаю, что его то, что вы хотите

$(function(){ 

    $('.hardware img').hide().each(function(){ 

     // Get the number from the img class. For show1 will be 1, for show2 will be 2 etc. 

     var multiplier = $(this).prop('class').replace(/^\D+/g, ''); 

     // Use multiplier in delay. For show1 element will be 1000, for show 2 eill be 2000 etc. 

     $(this).delay(multiplier * 1000).fadeIn().fadeOut(); 
    }); 

});

Вы также можете установить изображения CSS в img {display:none;}, чтобы избежать прятать их с JQuery.

источник

2014-10-02 12:20:12 tliokos

выглядит как отличный код, но это не совсем то, что мне нужно. Я решил не использовать fadeIn и отображение, потому что это изменит макет сетки изображений. И кроме того, мне нужно, чтобы это был цикл, и мне нужно, чтобы изображения оставались на экране, как за 5 секунд до исчезновения. –

спасибо в любом случае, мне удалось сделать что-то близкое к тому, что я хотел использовать метод задержки, который вы мне показали. Это не получилось очень точно, но пока это будет сделано. –

См http://jsfiddle.net/xoc2s5x7/

Вам нужно настроить дивы в соответствии с вашим стилем. Проблема с кодом, который вы пытались, заключается в том, что у вас есть классы на изображениях, поэтому один анимат меняет несколько изображений, а обратный вызов запускается несколько раз, поэтому он выглядит случайным. Вам нужно поместить ваши изображения в divs и анимировать divs. Просто убедитесь, что вы анимации одного div за раз.

function animateAll() { 
    $(".show1").animate({opacity:1}, 1000, 
    function(){$(".show1").animate({opacity:0}, 1000, 
    function(){ $(".show2").animate({opacity:1}, 1000, 
    function() {$(".show2").animate({opacity:0}, 1000, 
    function(){ $(".show3").animate({opacity:1}, 1000, 
    function(){$(".show3").animate({opacity:0}, 1000, 
    function(){animateAll();});}); });}); });}); 
};

источник

2014-10-03 09:15:17 artm

Javascript/JQuery Множественная анимация непрозрачности элементов

ответ

Смежные вопросы