Tag: 动画

幻灯片上的文本动画的jQuery循环

我正在尝试找到一种方法来为幻灯片的每张幻灯片设置图像标题和标题的动画，并将其动画效果与幻灯片放映同步。 即，一旦幻灯片切换效果结束，标题从右向左移动，标题从上到下，当幻灯片切换效果启动时，整个文本将在幻灯片淡出的同时淡出，让新的幻灯片和文字淡入。 我想出了如何使用.animate（ http://jsfiddle.net/S8F9Y/ ）使我的图像标题和标题移动： var $j = jQuery.noConflict(); $j(document).ready(function() { // Get the slideshow options var $slidespeed = parseInt( meteorslidessettings.meteorslideshowspeed ); var $slidetimeout = parseInt( meteorslidessettings.meteorslideshowduration ); var $slideheight = parseInt( meteorslidessettings.meteorslideshowheight ); var $slidewidth = parseInt( meteorslidessettings.meteorslideshowwidth ); var $slidetransition = meteorslidessettings.meteorslideshowtransition; var $captionduration = $slidetimeout – ($slidespeed*2); $j(‘.meteor-slides h1′).delay($slidespeed).animate({left: ’30’,opacity: 1}, 600, […]

如何使用jQuery在hover时循环显示背景颜色

我正在尝试使用鼠标hover在背景颜色上制作一个div。 我已经想出如何使背景颜色从mouseenter上的一组值切换到颜色值，但不知道如何让它继续运行。 当鼠标hover在元素上时，如何使背景颜色不断变化（并在我被淘汰后停止）？ 到目前为止，这是一个完全正常工作的小提琴： FIDDLE 我的HTML： 我的CSS： #coloredDiv { width:200px; height:200px; border:1px solid #888; } #coloredDiv:hover { cursor:pointer; } 我的jQuery： var colors = [‘#eeeeee’, “#00ff00”, “#ff0000”, “#000000”]; $(document).ready(function () { $colorDiv = $(‘#coloredDiv’); ln = colors.length; $(‘#coloredDiv’).mouseenter( function () { var i = $colorDiv.data(“index”); ++i; if (i >= ln) i = 0; $colorDiv.css({ ‘background-color’: colors[i] […]

填充容器的视差背景图像

我正在使用stellar.js将视差效果应用于背景图像。 背景图像周围的容器高度由javascript设置为窗口高度减去标题的高度。 我将背景图像设置为覆盖在css中，并希望它填充容器而不管屏幕大小。 这没有视差效果，但是一旦我应用了视差效果，定位就会改变，所以当容器很高时，图像不会填满它。 我和Stellar.js的创建者Mark Dalgleish谈过，看看他是否有任何想法，他说背景图像必须高于容器才能填充它，这几乎就是我得出的结论。 。 所以我想知道是否有不同的方法可以实现这一目标。 有没有人有任何想法？ 这是我试图让它工作的网站。 如果您通过从侧面拉入浏览器窗口并重新加载页面来调整其大小，您将看到我的意思。 图像下方有一个间隙。 http://sonomarinwebdesign.com/agnitio

如何在添加类时设置顺序延迟？

我正在使用jQuery UI插件和最新的jQuery。 我想顺序添加类，逐个添加我的元素数组。 现在我有这个： $(@el).addClass(“gridBoxComplete”, 400, “easeOutBounce”).delay(800) 其中@el是数组中的当前元素。 但是，在运行迭代中的下一个项目之前，这不会延迟此对象。 我基于这个想法基于这个动画。 $(@).hide().each (index) -> $(@) .delay(index * 100) .fadeIn 500

限制jQuery-ui Draggable仅在给定区域内向上拖动

我有一个固定位置的图像，我用CSS制作动画，当用户滚动时向下移动屏幕边缘。 – 效果很好。 当图像到达屏幕底部时，用户可以点击它并将其动画回到顶部。 – 也运作良好。 我也试图让用户使用jQuery-ui Draggable将其拖动到顶部。 – 这里出现了并发症。 我需要将图像向上拖动，从不向下，所以我通过移动带有可拖动图像的包含包装来限制我的可拖动元素仅向上拖动。 我还在页面顶部完全限制拖动，以防止图像被拖到页面顶部之外。 在大多数情况下，这在Firefox中运行良好，但我在Webkit浏览器中遇到问题，当用户第一次开始拖动它时，可拖动图像“跳起来”。 我也有问题让这种效果在不同的屏幕尺寸上运行良好，因为我正在使用顶部和底部位置调整。 的jsfiddle // repel down animation var previousScroll = 0; var scroll = function () { var currentScroll = $(this).scrollTop(); var z = $(window).scrollTop(); if (currentScroll > previousScroll && $(‘#repel’).css(‘top’) > ‘-400px’) { //down scroll code $(“#repel”).removeClass(“climb”); $(“#repel”).addClass(“repel”).delay(400).css(‘top’, ‘+=2%’); } if (currentScroll […]

Pjax：为内容添加动画

对于我的网站，我使用了pjax。 我想将fadeout和fadein动画添加到页面。 我试过这个stackoverflow的答案 我的代码是 // invoke pjax $(function(){ $(‘div#header-menu a’).pjax(‘#master-div’) }) // do animation $(document).on(‘pjax:start’, function() { $(‘#content’).fadeOut(1000); }) $(document).on(‘pjax:end’, function() { $(‘#content’).fadeIn(1000);}) ‘content’是不断改变pjax的div的id 难道我做错了什么？ 请帮忙，谢谢

jquery停止后重新启动动画

可能重复： Jquery连续循环动画 当div计时器达到940px时，我希望这个动画重新启动。 到目前为止我有这个： $(‘.timer’).animate({‘width’:940}, {queue:false, duration:5000, easing: ‘linear’}); if ($(‘.timer’).width() == 940){ $(‘.timer’).width() == 0; $(‘.timer’).animate({‘width’:940}, {queue:false, duration:5000, easing: ‘linear’}); }

使用（单击）角度添加第二个动画

我正在使用图书馆动画https://daneden.github.io/animate.css/ 例如，为了添加类动画+ nameOfAnimation而添加动画 我想在点击按钮时添加第二个动画，所以我想到了类似的东西 addClass():void{ $(‘.heroe-button’).removeClass(‘fadeInLeft’); $(‘.heroe-button’).addClass(‘fadeOutRight’); } 但这没有做任何事情..我也尝试添加和删除不透明度来重置动画，但两者都没有。 几乎没有其他一些技巧，但没有成功。 （基本上我想做的是一个按钮fadesin动画，当按下按钮它淡出也动画..

使用setTimeout延迟jQuery动画

当用户按下按钮移动到下一个图像时，我正在处理图像上的一些转换。 当彼此相邻的多个图像非常窄时，这些图像将同时转换。 因此，我检查图像上的宽度，并将薄的数据添加到数组中，然后对数组中的每个对象运行转换。 我想在数组中每个图像的动画之间创建一点延迟，所以我试图在1秒超时后运行我的jQuery.animate。 以下是我试图让超时工作失败的方法： 1。 for (i=0; i < set.length; i++) { if (i != 0) { setTimeout(function() { set[i].transitionOut($('#gallery'), 562) }, 100); } else { set[i].transitionOut( $('#gallery'), 562 ); } } 2。 for (i=0; i < set.length; i++) { if (i != 0) { function tempTransition() { set[i].transitionOut( $('#gallery'), 562 ); } setTimeout(tempTransition, […]

如何在航点function内滚动动画？

当用户向下滚动时，我有从屏幕左侧和右侧出现的图像。 使用divPosition = $(‘div’).offset().top; 获取包含元素的位置我从scrollValue = $(document).scrollTop();减去该值scrollValue = $(document).scrollTop(); 并将值应用于绝对定位图像上的左侧位置。 包含div的偏移量是在刷新和resize时计算的。 在不调整窗口大小的情况下， x=scrollValue – divPosition随刷新页面的滚动距离而变化。 我希望它保持一致。 有没有更好的方法来使这种类型的动画工作。 例如，是否可以使用垂直滚动作为带有航点的x值来触发动画？ window.onresize=function(){ divPosition = $(‘div’).offset().top; }; $(document).scroll(function(){ scrollValue = $(document).scrollTop(); x = scrollValue – divPosition; } 这是该网站的链接。 当我发现问题的原因时，我会在这个问题中发布相关的代码部分。 http://www.otherdewi.com/gg.html