标签: jquery-animate

我正在建立一个网站,它允许用户更改视图选项.我使用jQuery来平滑动画以更改字体.它将整个页面淡出并重新使用新字体.

淡出动画很好,但当它淡入时,就没有褪色.它只是弹出,没有动画.

有问题的jQuery位于http://xsznix.my3gb.com/options.php中.

我到目前为止的代码是这样的:

$('#font-classic').click(function(){
    $(document.body).animate({opacity: '0%'},{duration: 1000, complete: function(){
        // font changing code here
        $(document.body).animate({opacity: '100%'}, 1000);
    }});
});

我想做最奇怪的事情:使用animate进行值更改,这不是css属性而只是变量.

我需要这个,因为我想在用户点击其边框时旋转元素.所以我需要设置角度值的动画,然后在自定义绘图算法中使用它.

我试图使用隐藏DIV的css属性来存储它的角度值并为其设置动画,但它无法正常工作.

有人可以帮我吗？

我试图使用jQuery显示和隐藏内联元素(例如跨度).

如果我只是使用toggle(),它按预期工作,但如果我使用toggle("slow")给它一个动画,它会将span转换为块元素,因此插入中断.

内联元素可以动画吗？如果可能的话,我宁愿顺利滑动,而不是淡入淡出.

<script type="text/javascript">
    $(function(){
        $('.toggle').click(function() { $('.hide').toggle("slow") });
    });
</script>
<p>Hello <span class="hide">there</span> jquery</p>
<button class="toggle">Toggle</button>

当我使用jQuery单击一个按钮时,我试图使用"bubble"类来创建一个圆形div.我想让它从零开始出现并增长到它的全尺寸,但我无法让它工作.继承我的代码:

HTML显示泡泡...... CSS

.bubble {
    transform: scale(0);
}

使用Javascript

 $('button').click(function(){
     $('.bubble').animate({transform: "scale(1)"}, 5000, 'linear');
 });

在许多情况下,我希望动画同步执行.特别是当我想制作一系列连续动画时.

有一种简单的方法可以使jQuery animate函数调用同步吗？

我想到的唯一方法是在动画结束时将标志设置为true并等待此标志.

我希望在2.5秒内将进度条的宽度设置为0%到70%.但是,下面的代码会在2.5秒延迟后立即将宽度更改为70%.我错过了什么？

$(".progress-bar").animate({
    width: "70%"
}, 2500);

JSFiddle: http ://jsfiddle.net/WEYKL/

我试图使用jQuery实现滚动效果.我有一个背景div设置为100%浏览器窗口大小隐藏溢出.这有一个大的背景图像约.1500px x 2000px.

我想要的效果是当用户向下滚动页面时背景图像以滚动距离的百分比移动,因此对于每页向下滚动200px,图像在相同方向上移动10px.

谁能指出我正确的方向？这甚至可能吗？: ) 提前谢谢了.

UPDATE

我已经尝试过@Capt Otis的建议变体,但我仍然在努力解决我正在使用的代码如下:

$(window).scroll(function(){
    if($(this).scrollTop() > 200) {
        $('#div').animate({'background-postion': '+=10px 0'}, 500);
    }
});     

任何人都可以解释我做错了什么吗？

现在我正在使用这个:

$('#go-to-top').each(function(){
  $(this).click(function(){ 
    $('html').animate({ scrollTop: 0 }, 'slow'); return true; 
  });
});

这在Chrome中不起作用,在Opera中我得到一个小闪烁:浏览器立即滚动到顶部,然后回到底部,然后它开始慢慢地滚动回顶部,就像它应该的那样.

有一个更好的方法吗？

我已经尝试过stop(true,true),stop(true)和clearQueue(); 但这不起作用.

我有快速更换幻灯片的问题,我已经有一些功能必须重置一切,但它不起作用.

function reset(){
   $('div').clearQueue();
   $('#img').html('').css({'left':0,'right':0,'opacity':1,'z-index':1});
   $('#img2').html('').css({'left':0,'right':0,'opacity':1,'z-index':1});
   $('#place').html('');$('#place').html('<div id="img"></div><div id="img2"></div>');
}

但我认为这不会停止(或删除)动画上的delay()函数.所以我不知道我是否不必使用setTimeout函数.

这是一块动画脚本:

reset();
actual_slide=2;
  $('#img').html('<img src="'+image[4]+'" alt="Obrázek">').css({'opacity':0,'z-index':2}).delay(time_delay/5).fadeTo(time_fast,1).delay(time_delay*2).fadeTo(time_fast,0);
  $('#img2').html('<img src="'+image[3]+'" alt="Obrázek">').css({'opacity':'0','top':0}).fadeTo(time_fast,1).animate({'top':'-495'},time_delay*3,function(){
    if(actual_slide==2){$('#img2').css({'top':0}).fadeTo(time_fast*2,0).html('');}else{reset();}
    if(actual_slide==2){$('#img').html('<img src="'+image[3]+'" id="1" alt="Obrázek">').fadeTo(time_fast*2,'1').css({'left':-300,'top':-700}).animate({'left':-900,'top':-700},time_delay*2);}else{reset();}
    if(actual_slide==2){$('#1').css({'width':1365,'height':1200}).animate({'width':1665,'height':1400},time_delay*2);}else{reset();}
  });                          

那个actual_slide必须在重复那个函数之前保护它,但是这也不起作用.问题是当我快速更改幻灯片时,因为重置不会阻止所有内容,并且它开始做我不想要的东西in(比如将图片更改为其他图片).

有没有办法在jQuery中设置CSS显示属性的动画？我有以下内容:

$(".maincontent").css("display","block");

并希望它做这样的事情:

$(".maincontent").animate({"display": "block"}, 2500);