Animate, а затем заменить класс DIV с эффектом постепенного изменения

Question

JSFiddle: Fiddle

Как это должно работать следующим образом:

1 - красные блоки скользят сверху вниз
2 - как только это будет сделано, то красные коробки FADEOUT
3 - то синие FadeIn

Ниже приводится HTML:

<div class="posRel"> 
    <div class="trans1"></div> 
    <div class="trans2"></div> 
    <div class="trans3"></div> 
    <div class="trans4"></div> 
    <div class="trans5"></div> 
    <div class="trans6"></div> 
    <div class="trans7"></div> 
</div> 

Ниже приводится ЯШ:

for (i = 1; i <= 7; i++) { 
     $('.trans' + i).toggleClass('toggle'); 
    } 

    setTimeout(function() { 
     $('.toggle').fadeOut('slow', function() { 
      $(this).addClass('fSmall1').fadeIn('slow'); 
     }); 
    }, 2000); 

Ссылка на проект: http://50.87.144.37/~projtest/team/design/EO/page-2.html

Ссылка вопросам JSFiddle

, что я столкнулся:

• fadeOut и fadeIn не работают
• ничего лучше, чем устанавливать для этого?

Я довольно неопытный, когда дело доходит до js/jQuery, поэтому не стесняйтесь указывать на любую глупую ошибку. Благодарю.

Answer 1

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

Во-первых, ваша проблема с выцветанием/привязкой связана с тем, как запускается ваша анимация. Вы по существу вызывая замирание на каждом элементе в отдельности, а затем исчезают в, но с функциональностью, которую вы описали в ваших требований вы должны стрелять один замирание на контейнере вместо:

for (i = 1; i <= 7; i++) { 
    $('.trans' + i).toggleClass('toggle'); 
} 

setTimeout(function() { 
    $('.posRel').fadeOut('slow', function() { 
     $('.toggle').addClass('fSmall1'); 
     $('.posRel').fadeIn('slow'); 
    }); 
}, 2000); 

Fiddle

плавный переход

Если вы хотите иметь гладкую увядает без него мигает, а потом обратно в вы можете использовать метод fadeTo() вместо этого. Пример FadeTo() можно найти ниже, это приведет к падению всех фигур, паузе на долю секунды, а затем изменению цвета. Вы можете поэкспериментировать с удалением setTimeout теперь, когда fadeTo управляет временем анимации, но я оставил его как можно ближе к оригиналу.

for (i = 1; i <= 7; i++) { 
    $('.trans' + i).toggleClass('toggle'); 
} 

setTimeout(function() { 
    $('.posRel').fadeTo('slow', 2, function() {$('.toggle').addClass('fSmall1');}); 
}, 2000); 

fadeTo() Example Fiddle

Answer 2

Если вы используете jQueryUI, это будет работать:

http://jsfiddle.net/zcYLM/11/ (это обновленное один)

Это основной, разобранный пример вашей проблемы , но вы можете применить его к вашему коду.

JS:

$(document).ready(function() { 
    $('div[class*=trans]') 
     .toggleClass('toggle', 2000) 
     .promise() 
     .done(function() { 
      $(this) 
       .fadeOut(2000) 
       .promise() 
       .done(function() { 
        $(this) 
         .addClass('blue') 
         .fadeIn(2000); 
       }); 
     }); 
}); 

CSS:

.posRel { 
    position:relative; 
} 

div.posRel > div { 
    background-color:red; 
    position:absolute; 
    top:0px; 
    width:100px; 
    height:100px; 
} 

div.posRel > div.trans1 { left:-50px; } 
div.posRel > div.trans1.toggle { left:100px; top:150px; } 
div.posRel > div.blue { background-color:blue; } 

Answer 3

я использовал fadeto собственности, попробуйте ссылку. http://jsfiddle.net/zcYLM/10/

[http://jsfiddle.net/zcYLM/10/][1] 


    [1]: http://jsfiddle.net/zcYLM/10/