Animate element with specific class and CSS properties

Question

I read Jquery: How to check if the element has certain css class/style and have got this working -

if ($(".box").css('display') == 'block')
{
  
    console.log("message  2 - Div with box class exists and css Block exists")


}

I read how to create jquery slide left and right toggle and got this working -

 $(".box").animate({width: "toggle"});

I can't seem to combine the two above together though. These two attempts failed -

   // ($(".box").css('display') == 'block').animate({width: "toggle"});
   // ($(".box").css('display') == 'block').animate({width: "toggle"});


   var datebox = ($(".box").css('display') == 'block')
   datebox.animate({width: "toggle"})
   datebox.animate({width: "toggle"})

Update 1

I tried Cucunber's suggestion and got this error - Uncaught TypeError: ".box".each is not a function

Update 2

I solved the problem highlighted in Update 1 by adding $ to ('.box'), Cucunber updated his answer below based on the issue I faced.

Update 3

I tinkered with Cucunber's solution and eventually solved my problem with this code.

$(".box" ).each(function( index ) {


   if ($(this).css('display') == 'block' ) { 



console.log( index + ": " + $( this ) );
  



   }
})

Please state your end goal. Should this happen on click of a button or when the page loads? 1) you have 2x toggle - if you toggle something twice it goes back to where it was, so nothing "appears" to have happened 2) you've converted an if (expression) to just (expression) (without the if) 3) always debug your variables a simple console.log(datebox) would show you that you have a boolean, so true.animate.. makes no sense - always check the console for errors (which you'll have this this code) — fdomn-m
– fdomn-m, Commented Sep 12, 2021 at 9:17
if ($(".box").css('display') == 'block') $(".box").animate({width: "toggle"}); — fdomn-m
– fdomn-m, Commented Sep 12, 2021 at 9:19
Rather than use .css("display") == "block", use $(".box").is(":visible") as "block" won't include eg inline or inline-block (or any other "visible" display property) — fdomn-m
– fdomn-m, Commented Sep 12, 2021 at 9:20
When the calender widget appears I want to apply an animation. I am using infinite scrolling datapicker (github.com/systemantics/infinite-scrolling-datepicker/blob/…) so unfortunately the instructions from jqueryui (jqueryui.com/datepicker/#animation) don't help. — Ross Symonds
– Ross Symonds, Commented Sep 12, 2021 at 9:31
I have multiple date input fields on a page. I am checking for css('display')=='block' because I only want to apply the animation to the visible calendar. — Ross Symonds
– Ross Symonds, Commented Sep 12, 2021 at 9:34

Cucunber · Accepted Answer · 2021-09-12 10:45:48Z

1

The sentence '$('.box').css('display') == 'block' returns boolean statement. If you know, .animate method should be used with the html element (selector). Try to use something like this:

'$('.box').css('display') == 'block' && $('.box').animate({width: 'toggle'})

combine it with '.each()' and the final result will be:

$('.box').each(function(){ $(this).css('display') == 'block' && $(this).animate({width: 'toggle'}) })

edited Sep 12, 2021 at 10:45

answered Sep 12, 2021 at 9:21

Cucunber

1613 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ross Symonds Over a year ago

I am trying to find a way of selecting elements which have a specific class and CSS style.

Cucunber Over a year ago

add some changes

Ross Symonds Over a year ago

I am getting this error message - Uncaught TypeError: ".box".each is not a function

Ross Symonds Over a year ago

I have amended my original question

Cucunber Over a year ago

add $ to ('.box')

Collectives™ on Stack Overflow

Animate element with specific class and CSS properties

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related