jQuery .show в сочетании с переходом CSS

От Animate element transform rotate (Ответ Dyin) Я до сих пор не могу заставить его работать правильно.jQuery .show в сочетании с переходом CSS

Я хочу затухать в div с jQuery .show(). Этот div содержит img. Теперь я хочу, чтобы img был увеличен в медленном режиме с помощью css-перехода и масштаба (не jQuery, потому что он намного более плавный) в самом начале команды .show().

Вкратце: я хочу, чтобы div исчезал, в то время как содержащий img масштабирует (одновременно показывает и масштабирует). Но я только управлять, чтобы увеличить после .Show() функция завершена, так:

$(this).show(800, function(){ 
    $(".bullets").removeClass("wait"); 
    $(this).find(".csc-textpic-image img").removeClass("zoomout").addClass("zoomin"); 
});

Если я позиционировать .addClass() за пределами функции, класс добавляется в исходном коде, но IMG не масштабировании на всех, как это:

$(this).find(".csc-textpic-image img").removeClass("zoomout").addClass("zoomin"); 
$(this).show(800, function(){ 
    $(".bullets").removeClass("wait"); 

})

CSS:

.zoomin { 
    transition: 24s linear; 
    -webkit-transform: scale(1.4); 
    -moz-transform: scale(1.4); 
    -ms-transform: scale(1.4); 
    -o-transform: scale(1.4); 
    transform: scale(1.4); 
} 
.zoomout { 
    transition: 24s linear; 
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
    -ms-transform: scale(1); 
    -o-transform: scale(1); 
    transform: scale(1); 
}

Любая помощь будет оценена высокоочищенного!

источник

2015-04-30 user3532637

Можете ли вы предоставить нам [jsfiddle] (http://jsfiddle.net/) вашего текущего прогресса? –

Почему бы вам просто не уклониться от CSS? –

Ничего себе, иногда это так просто, спасибо! – user3532637

Большое спасибо Джереми Тиллу! Easyiest решение с полным CSS:

Вместо JQuery .show() Я просто добавил еще два класса: .Visible и .hidden

.visible { 
    visibility: visible; 
    opacity: 1; 
    transition: opacity 2s linear; 
} 
.hidden { 
    visibility: hidden; 
    opacity: 0; 
    transition: visibility 0s 2s, opacity 2s linear; 
}

и добавить/удалить их в/из родительского DIV:

$(this).removeClass("hidden").addClass("visible"); 
$(this).find(".csc-textpic-image img").removeClass("zoomout").addClass("zoomin");

Теперь, затухание и масштабирование работают одновременно! Благодаря!

источник

2015-04-30 13:25:34 user3532637

jQuery .show в сочетании с переходом CSS

ответ

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