【问题标题】:jQuery animate only the top of value 'height'jQuery仅对值“高度”的顶部进行动画处理
【发布时间】:2023-04-11 00:32:01
【问题描述】:

我最近有一个类似的线程,但现在我需要为块的顶部设置动画。 就像现在一样,它从底部和顶部都进行动画处理。

例如,我希望它缩小,所以为了得到我写的:

$('#yellow').animate({height:'50%'},500);

但它会从顶部和底部位置收缩到中心。

有没有办法让它只从顶部缩小50%?

如果对这里有帮助的话

CSS:

#yellow{
height:250px;
width:500px;
background-color:yellow;
}

HTML:

<div id='yellow'></div>

【问题讨论】:

    标签: jquery colors jquery-animate block


    【解决方案1】:

    这里是顶部位置收缩块的完整解决方案:

    HTML:

    <div id="yellow">sdsds</div>
    

    CSS:

    #yellow{  position:absolute;  bottom: 0;  height:200px;  width:250px;  background-color:yellow; }
    

    JQuery:

    $("#yellow").toggle(function() {
    $(this).animate({
        'height': '100px'
    }, 500);
    

    },函数(){ $(this).animate({ “高度”:“200px” }, 500); });

    我还用解决方案创建了一个 bin,所以试试这个 http://codebins.com/codes/home/4ldqpc8

    【讨论】:

      【解决方案2】:

      你可以试试http://docs.jquery.com/UI/Effects

      已编辑:链接已更新

      看一个小演示:http://jsfiddle.net/rathoreahsan/ZMUz9/

      【讨论】:

        【解决方案3】:

        你可以通过一些绝对定位将你的方块粘在底部:

        #yellow{
          position:absolute;
          bottom: 0;
          height:250px;
          width:500px;
          background-color:yellow;
        }
        

        注意:它还需要定位它的容器。

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2012-08-09
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2011-07-30
          • 2012-08-02
          • 2018-04-09
          相关资源
          最近更新 更多