标签: jquery-animate

我正在为页面上的一些错误/验证元素设置动画.我想让它们反弹并突出显示,但如果可能的话,同时也要突出显示.这是我目前正在做的事情:

var els = $(".errorMsg");
els.effect("bounce", {times: 5}, 100);
els.effect("highlight", {color: "#ffb0aa"}, 300);

这导致元素首先反弹,然后突出显示,我希望它们同时发生.我知道.animate()您可以queue:false在选项中指定,但我不想使用动画,因为预先构建的效果"反弹"和"突出显示"正是我想要的.

我试过简单地将这些调用链接起来els.effect().effect(),但这不起作用.我也尝试queue:false输入我传入的选项对象,但这不起作用.

我尝试calc()使用jQuery animate 设置CSS ,例如:

$element.animate({
    height: 'calc(100% - 30px)'
}, 500);

而且我注意到它calc()不适用于jQuery动画......

我希望有一种方法可以做到这一点,我不希望以类似的方式去做,替代或解决方法,我想设置calc()

这不可能吗？以任何方式？

如果有可能,请告诉我们如何？

假设我有三个div,并且我希望每个div都完成前一个动画.目前,我写这个:

$('div1').fadeOut('slow', function() {
    $('div2').fadeOut('slow', function() {
        $('div3').fadeOut('slow');
    });
});

这是丑陋的,但可管理.

现在想象一下,我有10种不同的动画需要在不同的元素上一个接一个地发生.突然,代码变得如此笨重,以至于管理起来非常困难......

这是我想要做的伪代码:

$('div1').fadeOut('slow' { delay_next_function_until_done: true } );
$('div2').fadeOut('slow' { delay_next_function_until_done: true } );
$('div3').animate({ top: 500 }, 1000 );

我该如何实现这一目标？

Twitter将弹出屏幕顶部的消息栏,说"密码错误",10秒后,它会向上滑动并消失.Chrome还会使用这种方式显示"您是否要保存密码"消息框.

jQuery是否有插件可以做到这一点？它是否也适用于IE 6？因为通常,相对于视口(使用position: fixed)的显示将无法在IE 6上运行.谢谢.

更新:感谢很好的解决方案 - 即使用户向下滚动页面时,我也特意想让它工作(1),它会显示在窗口屏幕的顶部,(2)可能会选择显示栏取而代之的是在窗口屏幕的底部(作为一个选项)......如果它在IE 6上运行,那么它就更好......现在可怜的程序员......

我已经获得了jQuery lib的一个减少的子集,我缺少的一个关键特性是.effect函数.但我有.animate.我想知道是否有人会有任何想法如何再现动画功能.

因为我需要保持代码大小,所以我特别想要这几行.这就是为什么jquery lib尽可能小,并且没有效果函数.

TLDR - 我正在尝试更换

 $("#"+id_string).effect( "shake", {}, "fast" );

.animate在jQuery中使用一些东西.

我正在使用一个非常简单的动画:向左滑动一行图像:

$('#button').click(
    function() {
        $('div#gallery').animate({scrollLeft:'+=800px'}, 1000);
    }
);

(它应该是一个图像库;我隐藏溢出,一次只显示一个图像.)

无论如何,尽管尝试了各种缓和参数,即使速度很慢,Chrome和Safari中的动画也非常不稳定,但在Internet Explorer和Firefox中总是很流畅.(网上提出的大多数问题都是关于IE或Firefox的不稳定!)

我找到了原因,对我而言.这是一个非常特殊的情况,可能不适用于大多数,但也许它会帮助别人.我将在下面发布我的答案.(我认为网站指南允许这样做.)

我通过CSS将硬币沿Y轴旋转90度.有没有办法让我可以在旋转后显示硬币的厚度,我认为在硬币沿Y轴旋转后我可以缩放,但这似乎不起作用.如果可能的话,请建议一些方法来做同样的事情.link_on_js也是如此.请使用webkit浏览器打开链接.

CSS

.coin {
    display: block;
    background: url("url-to-image-of-coin.jpg");
    background-size: 100% 100%;
    width: 100px;
    height: 100px;
    margin: auto;
    border-radius: 100%;
    transition: all 500ms linear;
}

.flip {
    transform: rotateY(180deg);
}

HTML

<div class="coin"></div>

jQuery的

$('.coin').click(function() {
    $(this).toggleClass('flip');
});

小提琴

http://jsfiddle.net/7EtLu/22/

我需要使用jquery"动画化"变量.

示例: 变量值为1. 5秒后该值应为10.它应该"平稳地"增加.

希望你知道我的意思.

谢谢!

见demo:jsFiddle

• 我有一个简单的表单,在点击'show'/'cancel'时切换
• 一切正常,但是如果你在表单显示后不久点击"取消",那么在动画开始之前就有2-3秒的延迟.
• 如果您在单击"取消"之前等待几秒钟,则不会发生这种情况.
• 在所有测试的浏览器中都会出现滞后(即ff,chrome).

1.什么可能导致这种滞后,如何防止这种情况发生？

2.有没有更好的方法来编码这个动画序列,这可能会阻止任何滞后？

HTML:

<div id="newResFormWrap">
    <form id="newResForm" action="" method="post" name="newRes">
        <div id="newResFormCont">
            <h3>title</h3>
            <p>form!</p>
            <div class="button" id="cancelNewRes">Cancel</div>
        </div>
    </form> 
</div>
<div class="button" id="addRes">show</div>

jQuery的:

$("#newResForm").css({opacity: 0});

$("#addRes").click(function () {
    toggleNewRes()
});
$("#cancelNewRes").click(function () {
    toggleNewRes()
});

//toggleNewRes
function toggleNewRes() {
    if ($("#newResFormWrap").css('display') == "none") {//if hidden 
        $("#addRes").animate({ opacity: 0 }, 'fast', function() {
            $("#newResFormWrap").toggle('fast', function (){
                $("#newResForm").animate({ opacity: 100 },2000);
            });
        });
    } else { //if visible
        $("#newResForm").animate({ opacity: 0 }, …

我有这个垂直幻灯片可以通过上/下箭头导航.幻灯片放映容器div中有7个项目(div),但一次只能显示其中的3个.实际上,这个幻灯片是一个菜单 - 从可见的3个项目中,中间的一个是可点击的,它将在页面中的其他位置加载内容.

现在,由于有3个项目,只有第2个项目(中间一个)是可点击的,我需要在它们之间创建差异.所以,我想改变项目border/border-radius是这样的:

问题是我不知道如何做到这一点,因为div在可见区域不断变换位置.我真的需要帮助.

HTML标记:

<div id="rocksType_btns">
    <div id="rocksType_btnUp"></div>
    <div id="rocksType_btnDown"></div>
</div>

<div id="rocksType_subtypeSlider">
    <div id="rocksType_DBitems_container">
        <div id="rocksType_DB_1" class="rocksType_DBitem">Item 1</div>
        <div id="rocksType_DB_2" class="rocksType_DBitem">Item 2</div>
        <div id="rocksType_DB_3" class="rocksType_DBitem">Item 3</div>
        <div id="rocksType_DB_4" class="rocksType_DBitem">Item 4</div>
        <div id="rocksType_DB_5" class="rocksType_DBitem">Item 5</div>
        <div id="rocksType_DB_6" class="rocksType_DBitem">Item 6</div>
        <div id="rocksType_DB_7" class="rocksType_DBitem">Item 7</div>
    </div>
</div> <!-- End of id="rocksMenu_subtypeSlider" -->

我已经为before/current/after状态定义了CSS代码 - 只需要分配它们.

这是一个小提琴.

感谢名单.

佩德罗