Animation Event Target

Custom Microthemer option. Choose which element the animation should be applied to once it is triggered by a JavaScript event (this will not work with CSS events). If you leave this field blank, the animation will be applied to the element the current selector targets - the single element that triggered the event. But sometimes you might want to specify a custom CSS selector, so you can apply the animation to different element(s). For example, clicking one element could animate a related element close by.

But what if you only want the effect to apply to a single element, relative to the position of the triggering element? Imagine an FAQs page with multiple headings and answer blocks. You apply a click event to the headings to reveal answers, but you only want this to reveal the single answer immediately following the heading that was clicked - not all answers on the page. Microthemer supports this behaviour with jQuery-style syntax entered into the same input field separated with a pipe e.g. .faq-answer|next(). See below for details and more examples.

Value Description
(selector)Enter a CSS selector e.g. img.avatar
(selector|path syntax)

Enter a CSS selector e.g. img.avatar, followed by a pip (|), followed by jQuery-style dom selection syntax e.g. closest('article'). All together, this would look like: img.avatar|closest('article').

Chaining with dots (.) is supported. Quotes, brackets and selectors inside brackets are optional. Microthemer will default to using the selector entered before the pipe for the following directives: closest, parents, find, children, siblings. Microthemer also supports these directives (without defaulting to a selector): prev, next, parent.

Example: img.avatar|next.find equates to img.avatar|next().find('img.avatar')

Themeover CSS Reference

Close