5 Replies - 240 Views - Last Post: 15 May 2017 - 06:24 AM

#1 thibaut  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 13-May 17

jquery animate on parent element not working

Posted 14 May 2017 - 06:53 PM

I want the parent element to change position (the opposite of each other)

html
<div>
  <p style="float: left;"><a class="theme" href="#">part one</a></p>
  <p style="float: right;"><a id="switch" href="#">part two</a></p>
</div>


jquery

  $("#switch").click(function(e){
      e.preventDefault();
      // queue --> word uitgevoerd wanneer code gelade is
      //eerst één stijl opslaan
      var $flt = $(".theme").parent().css("float");
      alert($flt);
      if($flt.toLowerCase() == "left"){

        $(".theme").parent().animate({
           float: "right"
        }, { queue: false,  duration: 3000 });

        $("#switch").parent().animate({
           border: "10px solid red"
        }, { queue: false,  duration: 3000 });
      }
      else{
        $(".theme").parent().animate({
           float: 'left'
        }, { queue: false,  duration: 3000 } );

        $("#switch").parent().animate({
           float: 'right'
        }, { queue: false,  duration: 3000 });
      }

    });


Is This A Good Question/Topic? 0
  • +

Replies To: jquery animate on parent element not working

#2 andrewsw  Icon User is offline

  • lashings of ginger beer
  • member icon

Reputation: 6340
  • View blog
  • Posts: 25,570
  • Joined: 12-December 12

Re: jquery animate on parent element not working

Posted 14 May 2017 - 10:28 PM

Are there errors in your browser's console?
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is offline

  • lashings of ginger beer
  • member icon

Reputation: 6340
  • View blog
  • Posts: 25,570
  • Joined: 12-December 12

Re: jquery animate on parent element not working

Posted 14 May 2017 - 11:03 PM

animate()

Quote

Shorthand CSS properties (e.g. font, background, border) are not fully supported. For example, if you want to animate the rendered border width, at least a border style and border width other than "auto" must be set in advance. Or, if you want to animate font size, you would use fontSize or the CSS equivalent 'font-size' rather than simply 'font'.

Was This Post Helpful? 0
  • +
  • -

#4 thibaut  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 13-May 17

Re: jquery animate on parent element not working

Posted 15 May 2017 - 05:38 AM

View Postandrewsw, on 14 May 2017 - 11:03 PM, said:

animate()

Quote

Shorthand CSS properties (e.g. font, background, border) are not fully supported. For example, if you want to animate the rendered border width, at least a border style and border width other than "auto" must be set in advance. Or, if you want to animate font size, you would use fontSize or the CSS equivalent 'font-size' rather than simply 'font'.


There are no errors in my console, and i don't find any solution on that page. :/
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is offline

  • lashings of ginger beer
  • member icon

Reputation: 6340
  • View blog
  • Posts: 25,570
  • Joined: 12-December 12

Re: jquery animate on parent element not working

Posted 15 May 2017 - 05:45 AM

Did you read the quote? "Shorthand CSS properties (e.g. font, background, border) are not fully supported."

It also hints at a possible workaround, setting and animating properties individually, such as border-width.

I haven't tried it, but I doubt that we can animate float either(?). Probably have to make it relative first, and use left or right, etc., to get some 'movement'.
Was This Post Helpful? 1
  • +
  • -

#6 thibaut  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 13-May 17

Re: jquery animate on parent element not working

Posted 15 May 2017 - 06:24 AM

View Postandrewsw, on 15 May 2017 - 05:45 AM, said:

Did you read the quote? "Shorthand CSS properties (e.g. font, background, border) are not fully supported."

It also hints at a possible workaround, setting and animating properties individually, such as border-width.

I haven't tried it, but I doubt that we can animate float either(?). Probably have to make it relative first, and use left or right, etc., to get some 'movement'.


aah didn't notice the quote, my bad.
And now i get it working, thanks!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1