Why can't I animate to 100% width in Jquery?

Question

I was trying to answer a question for someone else and I ran into weird/unexpected behavior from jquery. The width specified on rule 18 in the JSFiddle is unable to animate if I change it to 100% (in the example it is 200px by the way, so change it to 100% to see what I m talking about). I need this to be 100% so the button automatically fits the text.

JSFiddle.

The question is: "How do I make the animation work with 100% width???"

Jquery code:

$(document).ready(function(){
    $(".ScrollDownArrow").click(function(){
        if($(".ScrollDownArrow").hasClass("Clicked")){
           $(".Hint img").fadeOut(500); 
           $(".Hint p").delay(500)/*wait on fadeout*/.animate({width: 200} /*Unfortunately width: 100% does not seem to work so I took a px value :(*/, 1000).animate({opacity:1}, 500); 
           $(".ScrollDownArrow").removeClass("Clicked");
        }else{
           $(".Hint p").animate({opacity:0.01}/*fade p out without making its width disappear for the width animation*/, 500).animate({width: 0}, 1000);
           $(".Hint img").delay(1500).fadeIn(500);
           $(".ScrollDownArrow").addClass("Clicked");
        }
    }); // End Click
});//End Ready

Works fine for me. Make sure you put your percentage between quotes: `{width: '100%'}` — Kippie, Nov 04 '14 at 15:35
@Kippie Have you tried doing it on the supplied fiddle? It doesn't work so something else is causing the problem. — Reinstate Monica Cellio, Nov 04 '14 at 15:39

score 0 · Answer 1 · answered Nov 04 '14 at 15:41

0

The problem is that you have put a div element (.Hint) inside an a.

The "100%" JQuery is animating to, is the element's parent's width (i.e. the a's width).

Anchor elements are, by default, inline elements (i.e. the display property in css is initially set to inline). As a consequence, the width of the anchor is auto.

To fix it, either set the width of the anchor to 100% or set its display property to block.

answered Nov 04 '14 at 15:41

Sethi

1,378
8
14

The anchor already had display: block applied. And setting the anchor width to 100% will make the button way to big. I want the button to have a width so it fits the paragraph inside (nothing more, nothing less). – Rob Monhemius Nov 04 '14 at 15:52
@RMo So what you actually want is to [animate to `width:auto`](http://stackoverflow.com/questions/5003220/javascript-jquery-animate-to-auto-height). – JJJ Nov 04 '14 at 16:00
@Juhana Yes, auto might be a more appropriate value. Still doesn't work however. – Rob Monhemius Nov 04 '14 at 16:21

score 0 · Answer 2 · answered Nov 04 '14 at 16:39

I came up with a workaround myself. By saving the width when the page loads in a variable, then using this variable later to return the "p" to its original size, I can use this variable later to return the div to its original size.

JSFiddle

$(document).ready(function(){
    var ButtonWidth = parseInt($(".Hint p").width());
    $(".ScrollDownArrow").click(function(){
        if($(".ScrollDownArrow").hasClass("Clicked")){
           $(".Hint img").fadeOut(500); 
           $(".Hint p").delay(500)/*wait on fadeout*/.animate({width: ButtonWidth} /*Unfortunately width: 100% does not seem to work so I took a px value :(*/, 1000).animate({opacity:1}, 500); 
           $(".ScrollDownArrow").removeClass("Clicked");
        }else{
           $(".Hint p").animate({opacity:0.01}/*fade p out without making its width disappear for the width animation*/, 500).animate({width: 0}, 1000);
           $(".Hint img").delay(1500).fadeIn(500);
           $(".ScrollDownArrow").addClass("Clicked");
        }
    }); // End Click
});//End Ready

This does not not explain why I can not animate to 100% / auto. That's why I am keeping this question unanswered for now.

Why can't I animate to 100% width in Jquery?

2 Answers2