{"id":4312,"date":"2009-09-30T19:04:56","date_gmt":"2009-10-01T02:04:56","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=4312"},"modified":"2009-10-01T20:32:33","modified_gmt":"2009-10-02T03:32:33","slug":"select-only-if-children-not-animated","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/jquery\/select-only-if-children-not-animated\/","title":{"rendered":"Select Element Only if Children are Not Animated"},"content":{"rendered":"
var myChildrenBehave =  $(\".element\").filter(function() {\r\n  var filtered = $(this).children().not(\":animated\");\r\n  return filtered;\r\n });<\/code><\/pre>\n
This selects the element only if its children behave (not being animated). Very helpful on a drop down menu (on hover or click)<\/p>\n","protected":false},"excerpt":{"rendered":"
var myChildrenBehave = $(“.element”).filter(function() { var filtered = $(this).children().not(“:animated”); return filtered; }); This selects the element only if its children behave (not being animated). Very helpful on a drop down menu (on hover or click)<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3245,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":14172,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/d\/disabled\/","url_meta":{"origin":4312,"position":0},"title":":disabled","date":"September 6, 2011","format":false,"excerpt":"The :disabled pseudo-class selector provides conditional styling to HTML elements that can receive user input, when the elements have the disabled attribute. It is defined in the CSS Selectors Level 3 spec as a \u201cUI element state pseudo-class\u201d, meaning it is used to style content based on the user's interaction\u2026","rel":"","context":"With 10 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":293365,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/backdrop-filter\/","url_meta":{"origin":4312,"position":1},"title":"backdrop-filter","date":"August 2, 2019","format":false,"excerpt":"The backdrop-filter property in CSS is used to apply filter effects (grayscale, contrast, blur, etc) to the background\/backdrop of an element. The backdrop-filter has the same effect as the filter property, except the filter effects are applied only to the background and instead of to the element's content. Classic example:\u2026","rel":"","context":"In \"backdrop-filter\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":13714,"url":"https:\/\/css-tricks.com\/almanac\/properties\/a\/animation\/","url_meta":{"origin":4312,"position":2},"title":"animation","date":"August 20, 2011","format":false,"excerpt":"The animation property in CSS can be used to animate many other CSS properties such as color, background-color, height, or width. Each animation needs to be defined with the @keyframes at-rule which is then called with the animation property, like so: .element { animation: pulse 5s infinite; } @keyframes pulse\u2026","rel":"","context":"In \"animation\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":252806,"url":"https:\/\/css-tricks.com\/snippets\/css\/animated-grainy-texture\/","url_meta":{"origin":4312,"position":3},"title":"Animated Grainy Texture","date":"March 16, 2017","format":false,"excerpt":"The DayTrip website uses a neat effect on its page header that distorts the background image with an animated, grainy texture. The effect is subtle but creates a dusty, retro vibe. The effect is very subtle. You can see the the difference where the effect is in place on the\u2026","rel":"","context":"With 13 comments","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/03\/css-snippet-grainy-comparison.gif?fit=700%2C250&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":203844,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/shape-outside\/","url_meta":{"origin":4312,"position":4},"title":"shape-outside","date":"June 17, 2015","format":false,"excerpt":"The shape-outside property controls how content will wrap around a floated element\u2019s bounding-box. Typically this is so that text can reflow over a shape such as a circle, ellipse or a polygon: .element { float: left; shape-outside: circle(50%); width: 200px; height: 200px; } It\u2019s important to note that this property\u2026","rel":"","context":"In \"basic shapes\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7786,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/shuffle-children\/","url_meta":{"origin":4312,"position":5},"title":"Shuffle Children","date":"October 31, 2010","format":false,"excerpt":"$.fn.shuffleChildren = function() { $.each(this.get(), function(index, el) { var $el = $(el); var $find = $el.children(); $find.sort(function() { return 0.5 - Math.random(); }); $el.empty(); $find.appendTo($el); }); }; Usage $(\".parent-element\").shuffleChildren(); See the Pen jQuery Shuffle Function by Chris Coyier (@chriscoyier) on CodePen.","rel":"","context":"In \"jQuery\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/4312"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=4312"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/4312\/revisions"}],"predecessor-version":[{"id":4334,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/4312\/revisions\/4334"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3245"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=4312"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=4312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}