JS code:
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 code:
<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>
CSS for the div in question:
div[role="pomoc"] {position: absolute; top: 45px; right: 0;width: 250px; display: none}
div[role="pomoc"]:first-child {display: block}
It is working, but a bit strange. First it is applying display block to the targeted div, then fading it out and fading in. What is going on?
The fadeOut callback is fired once for each completed animation. In your example, the callback gets executed multiple times because pomoc contains multiple elements. The strangeness is probably a visual artifact related to calling fadeIn multiple times on the same element.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.