[英]fadeOut -> fadeIn doesn't work properly
JS代碼:
var forma = $('form#mali_oglas'),
pomoc = $('div[role=pomoc]'),
div = $('.mali_oglas_pomoc'),
input = forma.find('input, textarea');
input.on('click', function(){
var name = $(':input:focus').attr("name")
pomoc.fadeOut('fast', function(){
div.find("[data-pomoc='" + name + "']").fadeIn('slow');
console.log(name);
});
});
HTML代碼:
<div class="mali_oglas_pomoc">
<div data-pomoc="name" role="pomoc">
1Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium, urna nec varius sollicitudin, erat urna accumsan sapien, vel interdum enim risus id mi. Class aptent taciti sociosqu ad litora.
</div>
<div data-pomoc="body" role="pomoc">
2Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium, urna nec varius sollicitudin, erat urna accumsan sapien, vel interdum enim risus id mi. Class aptent taciti sociosqu ad litora.
</div>.....
</div>
有關div的CSS:
div[role="pomoc"] {position: absolute; top: 45px; right: 0;width: 250px; display: none}
div[role="pomoc"]:first-child {display: block}
它正在工作,但是有點奇怪。 首先,它將顯示塊應用於目標div,然后將其淡出並逐漸淡入。這是怎么回事?
鏈接: http : //jsfiddle.net/AY2B3/
對於每個完成的動畫,fadeOut回調都會觸發一次。 在您的示例中,由於pomoc包含多個元素,因此該回調被多次執行。 怪異可能是與在同一元素上多次調用fadeIn有關的視覺偽像。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.