Question

我试图回答其他人的问题而且我遇到了来自jquery的奇怪/意外行为。 JSFiddle中规则18中指定的宽度无法动画，如果我将其更改为100％（在示例中它是200px顺便说一下，所以将其更改为100％以查看我在说什么）。我需要100％才能使按钮自动适合文本。

JSFiddle

问题是：＆＃34;如何使动画以100％宽度工作？＆＃34;

Jquery代码：

$(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

Answer 1

问题是您已将div元素（.Hint）放入a。

＆＃34; 100％＆＃34; JQuery是动画，是元素的父宽度（即a的宽度）。

默认情况下，锚元素是内联元素（即css中的display属性最初设置为inline）。因此，锚点的宽度为auto。

要修复此问题，请将锚点的宽度设置为100％，或将其display属性设置为block。

Answer 2

我自己想出了一个解决方法。通过在页面加载变量时保存宽度，然后使用此变量将“p”返回到其原始大小，我可以稍后使用此变量将div返回到其原始大小。

<强> 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

这并不能解释为什么我无法动画到100％/ auto。这就是我暂时没有回答这个问题的原因。

为什么我不能在Jquery中设置100％宽度的动画效果？

2 个答案: