标签: jquery-animate

<div class="factuuradres"></br><h3></h3></div>
<div class="factuuradresbutton">Meer Informatie</div>           

<script type="text/javascript">
    $(".factuuradresbutton").toggle(function(){
        $(".factuuradres").animate({
            height: "310px"
        }, 500 );
        complete: function() {
            $(".factuuradresbutton").html("Toch geen factuuradres")
            $(".factuuradres").html('<h2>Factuuradres</h2><div class="title_textbox3"><h3>Postcode:</h3></div><div class="textbox3"><input type="text" class="postcode" name="Postcode" value=""/></div><div class="title_textbox4"><h3>Huisnummer:</h3></div><div class="textbox4"><input type="text" class="huisnummer" name="Huisnummer" value=""/></div><div class="title_textbox"><h3>Straat:</h3></div><div class="textbox"><input type="text" class="field" name="Straat" value=""/></div><div class="title_textbox"><h3>Plaats:</h3></div><div class="textbox"><input type="text" class="field" name="Plaats" value=""/></div>')
        }
    },

    function(){
        $(".factuuradres").animate({
            height: "160px"
        }, 500 );
        $(".factuuradresbutton").html("Ander factuuradres?")
        $(".factuuradres").html("Factuuradres")
    });
</script>

我想知道为什么complete: function()不工作,谁能给我建议？

这也是工作脚本,但是一旦你点击按钮就会中断.一两秒钟后,它就像预期的那样工作.

    <script type="text/javascript">
    $(".factuuradresbutton").toggle(function(){
    $(".factuuradres").animate({
        height: "610px"
    }, 500 );
    $(".factuuradresbutton").html("Toch geen factuuradres")
    $(".factuuradres").html('<h2>Factuuradres</h2><div class="title_textbox3"><h3>Postcode:</h3></div><div class="textbox3"><input type="text" …

我正在尝试使用jQuery动画一些东西.

UPDATE

我按照我想要的方式工作.这是jQuery:

    $(document).ready(function() {

        // go chat button
        $('#go-chat input').click(function() {
            $('#search, #go-chat').animate({width: '0px'}, 1000, function() {
                    $(this).hide();
                    $('#login, #go-search').animate({width: '573px'}, 1000, function() {
                            $(this).show();
                        }
                    );
                }
            );
        });
        $('#go-search input').click(function() {
            $('#login, #go-search').animate({width: '0px'}, 1000, function() {
                    $(this).hide();
                    $('#search, #go-chat').animate({width: '573px'}, 1000, function() {
                            $(this).show();
                        }
                    );
                }
            );
        });
    });

现在的问题是文本在幻灯片发生时正在包装并且非常难看.我怎么能这样做,以便文本作为搜索栏滑入/滑出,输入字段没有随着宽度变窄/扩展而包裹？

谢谢.

老问题

基本上,我想在搜索栏中向左滑动,基本上隐藏它,然后滑出它下面的4个输入.现在,我已将它们放在搜索栏下,但我的计划是隐藏它们,当按下"Go Chat"按钮时,搜索向左滑动,4个输入滑入右侧.

现在,搜索框滑入中心并且不会完全消失.我怎样才能让它像我想要的那样发挥作用？如果我的解释不清楚我在寻找什么,请要求澄清.

谢谢.

我可以很容易地为"不透明"属性设置动画

$("#blah").animate({ opacity: 0.5}, 1000);

如何设置max-height css属性的动画...示例:

$("#blah").animate({ "max-height": 350}, 1000);

(提示,该代码不起作用)

编辑:回答以下问题:

1. 所有css类都有多个图像"blah"
2. 图像是随机大小的,但它们都有最大高度:100px
3. 当用户将鼠标悬停在图像上时,我希望它为最大高度设置动画(从而平滑地限制高度)

我有<div id="test"></div>和<a id="trigger"></a>.Div的宽度为300px.我希望div在用户单击触发器时将其宽度调整为100px,并且当用户再次单击触发器时想要将其大小调整为先前的大小.我怎样才能使用jquery？

提前致谢...:)

blasteralfred

这对我不起作用......

$(document).ready(function(){
    $('#h .a').animate({
        top:'-=80px'
    },90,'linear');

    $('#h .au,#h .di').animate({
        left:'-=80px'
    },50000000,'linear');

    $('#h .r').animate({
        left:'-=80px'
    },250,'linear');

    $("#h").animate('pause'); //pausing it at the start
    //resume pause switch
    $("#h").mouseover(function(){
      $(this).animate('resume');
    }).mouseout(function(){
      $(this).animate('pause');
    });

});

我试图动画一个div,我试图在其他地方使用一些值进行检索,我知道这个值是正确的,因为我打印出输出...所以我想知道为什么它不能正常工作？

animateBar(percentage.toFixed(2)+'%');

[ . . . ]

function animateBar(percentage)
{
    $('#innerBox').animate({width: percentage}, 3000);
}

我想在页面加载时将div元素从绝对顶部位置设置为绝对底部位置.

下面的CSS和jQuery代码的组合无法移动任何东西:

CSS

#line-three {
    position:absolute;
    width:100%;
    left:0px;
    top:113px;
}

jQuery的

 $("#line-three").animate({
    bottom: "100px",
    }, 1200);

谢谢您的帮助!

编辑:

我已经尝试将其更改为此(根据graphicdevine的建议),但仍然没有雪茄:

var footerOffsetTop = $('#line-three').offset().bottom;
  $('#line-three').css({position:'absolute',top:'',bottom:footerOffsetTop})
  $("#line-three").delay(100).animate({
    bottom: '100px',
    }, 1200);

我在搜索这个问题时遇到了困难,因为我能找到的大部分内容都是关于动画应该很快但行动缓慢的动画.我的问题是关于一个我希望持续时间很长但仍然流畅的动画.

我已经创建了这个jsfiddle来演示这个问题:http://jsfiddle.net/93Bqx/

我试图让一个元素随着时间的推移慢慢移动到另一个位置.但动画非常不稳定.

基本上,它归结为这样的事情:

$elem.animate({
        left: x,
        top: y
}, someLargeNumber);

我想知道问题是动画是否太慢以至于每一步都小于一个像素,所以它将它们四舍五入为0或1使它看起来像是丢帧然后一次全部移动.但我不知道如何检查或解决这个问题.

有没有更好的方法来做慢动画,所以他们是顺利的？我有一个类似的用CSS3创建并且翻译(x,y)很顺利,但遗憾的是我需要比我认为可以用CSS获得更多的灵活性.

我怎样才能做到这一点？

$('#element').animate({ "width": "calc(100% - 278px)" }, 800);
$('#element').animate({ "width": "calc(100% - 78px)" }, 800);

我能做到这一点,如果它是唯一的%或唯一的px,但不是calc(),我可以使用jQuery的一些其他的选择吗？或者其他一些JavaScript技巧？

当用户单击某个元素时,必须进行更改,因此:

$("#otherElement").on("click", FunctionToToggle);

当用户点击时,$("#otherElement")必须发生切换效果.

如果您尝试从父级中的列表元素获取顶部偏移量,并且该父级位于顶部,则会得到错误的值.

http://jsbin.com/yuxacuduna/1/edit?html,css,js,console,output

尝试删除margin-top的上.container元素,你会看到它的工作.

这个问题的解决方案是什么？