标签: jquery-animate

我正在尝试使用无限循环实现jQuery函数,以使用3种颜色为主体背景设置动画.我想不出一个漂亮而干净的解决方案.像这样的东西？

$(document).ready(function(){                
     $('body').animate({backgroundColor:'#ffcc00'}, 500, function(){
        $('body').animate({backgroundColor:'#eeeeee'}, 500, function(){
           $('body').animate({backgroundColor:'#3b5998'}, 500);
       });
   });
});

任何的想法？

有没有办法检查元素是否正在动画？

但不是使用jquery的动画制作动画,而是使用css3的过渡..

我遇到的问题是......我有这个滑块,点击箭头我给它

left = left+200

左边是哪里

element.position().left

要么

parseInt(element.css("left"));

(这没关系,问题也出现了)

该元素正在动画

transition: left 400ms ease-in-out;

所以,当用户点击箭头一次然后在动画结束前再次点击时,左边会根据其位置返回值(因此,而不是说... 400px,它可能会返回235.47px,因为它在动画中间被点击) ..

每次我点击div"蓝色"它移动100px.它工作得很好,有一天我意识到它停止了工作.在尝试了很多东西之后,我发现问题出在最新版本的jQuery 1.10现在它只移动100px一次.这是因为它忽略了+ =.我找不到它是否被弃用？如果是这样,现在正是这样做的正确方法是什么？

你可以看到它在这里工作:http://jsfiddle.net/RB4eJ/1/
(这是在jQuery 1.9.1中工作.但它不在1.10)

$(function(){
    $(".blue").click(function() {
        $(".blue").animate({left: "+=100"}, 500)    
    });
})

我如何淡入淡出.addClass.

链接在这里 -

http://www.bikramyogajoondalup.com.au/about-bikram-yoga/postures-benefits.html

这是代码 -

$(document).ready(function() {
  $('#menu li#Q_01,#menu li#Q_03,#menu li#Q_05,#menu li#Q_07,#menu li#Q_09,#menu li#Q_11,#menu li#Q_13').hover(function() {
    $(this).addClass('pretty-hover');
  }, function() {
    $(this).removeClass('pretty-hover');
  });
});

$(document).ready(function() {
  $('#menu li#Q_02,#menu li#Q_04,#menu li#Q_06,#menu li#Q_08,#menu li#Q_10,#menu li#Q_12').hover(function() {
    $(this).addClass('pretty-hover_01');
  }, function() {
    $(this).removeClass('pretty-hover_01');
  });
});

谢谢

我有这个代码,它在我正在处理的网站上打开一个篮子预览.如果用户徘徊在它上面它会保持打开状态,但我希望它在触发我的悬停的回调之前有两秒钟的延迟.这是为了防止用户不希望鼠标离开篮子区域.

以下是我用来为篮子制作动画的代码:

$('.cart_button, .cart_module').hover(function(){
    $(".cart_module").stop().animate({top:'39px'},{duration:500});
}, function(){
    $('.cart_module').stop().animate({top: -cartHeight},{duration:500})
});

这是我试图使用的代码,但没有影响:

$('.cart_button, .cart_module').hover(function(){
    $(".cart_module").delay().animate({top:'39px'},{duration:500});
}, function(){
    $('.cart_module').delay().animate({top: -cartHeight},{duration:500})
});

我正在玩GWT的动画课作为练习.我的目标不是为GWT创建另一个小部件/动画库.另外,我很清楚有很多库可以做到这一点.我要做的是学习如何做到这一点,而不是如何使用一些库.这仅用于教育目的....

话虽如此,我已经实现了一个简单的类,在一些小部件上执行4种不同的动画:淡入,淡出,滑入和滑出(遵循jQuery的动画模型).请参阅下面的代码,了解我是如何实现它的.

现场演示: http ://www.rodrigo-silveira.com/gwt-custom-animation/

我的问题:如果触发另一个动画,我怎样才能顺利[并成功]停止动画,并继续当前动画中旧动画停止的动画？

例如,如果在调用slideOut()时,slideIn()是一半,那么如何从小部件的自然高度50%开始滑出？我尝试保留一个始终跟踪当前进度的成员变量,以便我可以在新动画中使用它,但似乎无法正确使用它.有任何想法吗？

import com.google.gwt.animation.client.Animation;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.user.client.Element;

public class RokkoAnim extends Animation {

    private Element element;
    private int currentOp;
    private final static int FADE_OUT = 0;
    private final static int FADE_IN = 1;
    private final static int SLIDE_IN = 2;
    private final static int SLIDE_OUT = 3;


    public RokkoAnim(Element element) {
        this.element = element;
    }

    public void fadeOut(int durationMilli) {
        cancel();
        currentOp = RokkoAnim.FADE_OUT;
        run(durationMilli);
    }

    public void fadeIn(int durationMilli) { …

这是xml的代码:

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/minepic" />

这里的minepic是一个gif动画图像,但在运行应用程序后它只显示一个静态图像.

有没有关于如何在Android应用程序中动画.gif图像的解决方案？

最终编辑:下面的文本墙可以通过简单地问"我可以使用jQuery指定动画的速度来总结animate()吗？所有提供的是" duration.

~~

animate()尽管我使用了"线性",但jQuery 似乎实现了缓和.我怎么能让两个盒子保持在一起,直到第一次完成@ 250px？第二个动画更快,因为它有更长的距离.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
    $(function()
    {
        $('#a').animate({left: '250px'}, 1000, 'linear');
        $('#b').animate({left: '500px'}, 1000, 'linear');
    });
</script>

<div id="a" style="background-color: red; position: relative; width: 50px; height: 50px;"></div>
<br/><br/>
<div id="b" style="background-color: red; position: relative;width: 50px; height: 50px;"></div>

或者有一个jQuery carousel插件可以做到这一点(基于你在哪里鼠标移动鼠标移动)所以我不必重写它？我花了大约20分钟在谷歌上寻找一个,但无法想出任何我喜欢的东西.

ETA:我提供的示例非常简单,但我发现它的问题适用于更复杂的代码库.(1)去这里.(2)将鼠标放在C. Viper上,查看速度.(3)将鼠标放在Ryu上,但在完成之前,将鼠标移动到DIV的中间位置(使其停止).(4)将鼠标放回左侧,看看它的移动速度有多慢.

计算速度和距离的差异似乎是不可克服的.我所要做的就是重现我今天看到网站使用的一个可爱效果(本网站).但它是Mootools,而我是jQuery.= [

我有一个在Chrome中无法正常运行的Web应用程序.在Firefox中完美运行.我有一个包含大量列表项的页面,确切地说是316.每个列表项都包含大量HTML.我的问题是当我想隐藏或显示这些列表项时.

我在jsFiddle上有一个测试页面来显示我遇到的问题.我将HTML页面剥离到一个无序列表以保存所有316个列表项.我有两个按钮,只需在点击时调用jQuery hide或show.同样,这在Firefox,Opera甚至IE中运行得很快,在Safari中非常好,但在谷歌Chrome中,它可能需要30秒以上,这会打开对话框窗口,询问您是否要杀死页面,因为脚本运行时间很长.

这是jsFiddle的链接

http://jsfiddle.net/oumichaelm/UZCZc/3/embedded/result/

感谢任何输入.JMM

我熟悉jQuery animate函数,我也经历了各种jQuery UI缓动函数.不幸的是,它们都不像我正在寻找的动画效果一样,所以是否可以创建自己的缓动功能？

我正在尝试的动画可以在Apple Mac webopage上看到,顶部是动态加载的产品小部件.初始项目似乎从顶部滑入,然后在着陆后给出反弹效果.是否可以使用自定义jQuery代码重新创建此缓动样式？或者可能建立自己的第三方简单功能？

我已经包含了我正在谈论的屏幕,希望有人可以提供解决方案.提前致谢 :)