Tag: jquery animate

可以动画jQuery前置？

我在点击按钮时将一些数据添加到我的页面而不是仅仅立即在页面上填充，我想知道是否有一种方法可以使用slideToggle或CSS动画为prepend()设置动画。 这是我目前的脚本： var data = $(‘.data’).html(); var insert = ”+ data +”; $(‘button’).click(function(){ $(‘.data-container’).remove(); $(‘.initial’).prepend(insert); }); 和JSFiddle

动画完成后，JQuery动画效果’弹跳’？

我一直在这里寻找答案，谷歌等等，似乎无法解决这个问题。 我有一张ID为＃pin01的图片。 这是地图上的一个图钉，我在div中制作动画，登陆地图图像（想想谷歌地图）。 我的JQuery非常棒，是这样的： $(‘#pin01’).animate({ opacity: 0}, 0).delay(500); $(‘#pin01’).animate({ opacity: 1, top: “305px” }, 500); 我的HTML如下： 动画效果很好，引脚会消失，然后就可以很好地落到地图上了。 我想要的是，它从div的顶部定位305px后反弹，所以当它在地图上时，它会在最后给出一点反弹。 我以为我会用这个效果： $(‘#pin01′).effect(“bounce”, { direction:’down’, times:5 }, 300); 我认为最终的代码会是这样的： $(‘#pin01’).animate({ opacity: 0}, 0).delay(500); $(‘#pin01’).animate({ opacity: 1, top: “305px” }, 500); $(‘#pin01′).effect(“bounce”, { direction:’down’, times:5 }, 300); 这导致弹跳，但它返回到针的原始起始位置，而不是保持305px运动。 我尝试放置一个顶部：效果，这不起作用。 我尝试过组合，嵌套这些等等，似乎没有任何工作。 如果有人有任何其他想法，很想知道如何让它正常运作。 我认为这是一个简单的调整，似乎无法弄明白。 解 删除： $(‘#pin01’).animate({ opacity: 0}, 0).delay(1000); $(‘#pin01’).animate({ […]

循环播放动画时，只运行最后一个循环

这是我上一个问题的后续内容。 我有一个progressbar.js圈子，可以滚动动画。 如果只有一个圆圈，则按预期工作。 现在我想通过循环一个具有不同键值对的对象来创建许多这些动画圆圈。 例如： var divsValues = { ‘total-score-circle’: 0.75, ‘general-score-circle’: 0.80, ‘speed-score-circle’: 0.85, ‘privacy-score-circle’: 0.90, }; 对于每个键值对，键是div ID，值是告诉动画要走多远的数字。 下面是我尝试实现循环的代码，但问题是只有最后一个圆圈在滚动时动画 。 所有圆圈都显示在“动画前”状态，但滚动到底部时，只有最后一个圆实际上变为动画。 我需要每个圆圈在视口中进行动画处理。 //Loop through my divs and create animated circle for each one function makeCircles() { var divsValues = { ‘total-score-circle’: 0.75, ‘general-score-circle’: 0.80, ‘speed-score-circle’: 0.85, ‘privacy-score-circle’: 0.90, }; for (var i in […]

在Internet Explorer 9中使用jQuery对子项进行动画处理时，父级div-shadow错误

当父div应用了css drop-shadow，并且使用jQuery对其子项进行动画处理以使父div更改高度时，在IE9中查看页面时会出现父div下面的奇怪行。 这是一个例子： http ： //jsfiddle.net/vPqxb/11/和截图： 对于只想看代码的人; 这是HTML：   ，CSS： div.parent { background: #ddd; box-shadow: 1px 1px 2px 1px #c9c7c9; width: 80%; } div div { background: red; height: 10px; width: 30px; } .longer { height: 200px; } 和JavaScript（请注意，第一个需要jQuery UI）： $(“a.toggleclass”).on(“click”, function() { //some trigger, doesn’t matter where div.stop(true,true).toggleClass(“longer”, 1000); }); $(“a.animate”).on(“click”, function() { //another […]

jquery的flash效果

我想使用jQuery fadeIn和fadeout 背景颜色 ，我尝试下面的代码，它影响完整的div内容，我需要为背景颜色添加闪光效果。 $(‘.countbox’).css(“background-color”,”#FF0000″).fadeIn(“fast”).delay(800) .fadeout(“fast”); checkout 我也尝试了这个，但它不起作用！ $(‘.countbox’).css(“background-color”,”#FF0000″).fadeIn(“fast”).delay(800).css(“background-color”,”#FFFFFF”); 有什么问题可以帮助我！ 编辑 哎呀！ 我的答案不适用于所有窗口。 哪一个只为当前窗口提供闪光效果，但我需要获得所有窗口的闪光效果。 例如： – 当我点击按钮时，它应该为我提供所有窗口的div闪光效果，就像在这个网站上一样 。

jquery中的多个fadein动画

我希望淡入几个水平排列的盒子。 假设每个盒子属于fadeable类并且有id。 另外，我想从外面淡出盒子。例如： _ _ _ _ _ _ _ _ _ +_ _ _ _ _ _ _ _ +_ _ _ _ _ _ _ + + + _ _ _ _ _ _ + + + _ _ _ _ _ + + + + + _ _ _ _ + + […]

我如何在JQuery中移动div并使用动画效果调整它？

我如何在JQuery中移动div并使用动画效果调整它？ 即div将位于屏幕的中间，它将向左侧移动，并且在完成移动后将具有其高度的％50和其宽度的％50。（例如，它将具有其大小的％75）中途） 编辑：我试过： $(“.block”).animate({“left”: “-=100px”, “height”: “-=30%”, “width”:”-=30%” }, 1000); 然而它消失了？ EDIT2：这有效： $(“.block”).animate({“left”: “-=100px”, “height”: “30%”, “width”:”30%” }, 1000); 然而它使我的方块更大，我尝试= -30％但不起作用。 我该怎么做才能变小而不是变大？

jQuery动画摇动hover

我试图在没有使用jQuery UI的情况下hover元素并且遇到以下代码，但是我似乎无法弄清楚如何在hover时触发，此代码具有随机效果并且每次我尝试时都会让我感到困惑弥漫它。 我试图让他们一次动画一个，而不是完全 http://jsfiddle.net/g6AeL/ $(function() { var interval = 10; var duration= 1000; var shake= 3; var vibrateIndex = 0; var selector = $(‘aside.featured a’); /* Your own container ID*/ $(selector).click( /* The button ID */ function(){ vibrateIndex = setInterval(vibrate, interval); setTimeout(stopVibration, duration); }); var vibrate = function(){ $(selector).stop(true,false) .css({position: ‘relative’, left: Math.round(Math.random() * shake) […]

单击jQuery反向动画

看了几个现有的问题，他们帮助我做到这一点，但仍然无法使它工作。 $(‘#languageSelctor’).click(function() { $(‘#languageList’).toggle(function() { $(this).animate({“top”: “20px”},500); }, function() { $(this).animate({“top”: “-100px”},500); }); }); 管理将上面的代码放在一起，但现在它只是不起作用。 因此，当有人点击languageSelctor时，需要出现languageList，如果再次单击languageList，则会消失。

JQUERY，scrollTo，向下滚动后，页面不会让我向上滚动一秒…… Y？

我正在使用以下JQUERY将偶数附加到标题中的链接，该链接基本上滚动到页面的底部： $(‘#comment-count-btn’).click(function(){ $(‘html,body’).scrollTo(‘#comment-wrapper’, 500); }); 问题是，它一直滚动到页面的底部（这是正确的），但是当我尝试向上滚动时，滚动条会跳跃，好像它被锁定了一点点。 有任何想法吗？