Tag: jquery animate

jQuery动画持续时间就像一个延迟: 这是我的脚本： greenGoButton.click(function() { $(“.road-animate”).css(“-webkit-animation-play-state”, “running”); $(“.buildings-animate”).css(“-webkit-animation-play-state”, “running”); road.addClass(‘road-animate’); buildings.addClass(‘buildings-animate’); //THIS IS WHAT IS DELAYING redCar.animate({ left: 1000 }, 5000); greenCar.animate({ left: 1000 }, 5000); //END of what I’m asking about 🙂 infoScreen.toggleClass(‘screen-two screen-three’); setTimeout(function() {screenTransition(2)} ,1500); }); 出于某种原因，REDCAR和GREENCAR的动画直到5秒之后才开始，然后它在大约半秒钟内匆匆穿过屏幕。我试过了： redCar.stop().animate({ left: 1000 }, 5000); greenCar.stop().animate({ left: 1000 }, 5000); 和： redCar.animate({ left: travelDistance }, { […]

jQuery切换不断重复: 我对jQuery很新，但看起来很简单。同样，我无法弄明白。我正在尝试在两个动画函数之间切换，但是当函数二完成时，它继续并且也调用函数一。 function toggleThis(){ $(“#navSliderArrow”).toggle(function() { $(this).animate({ marginLeft: ‘235’ }, 500); $(“#sliderArrow”).attr(“src”, “images/hide_nav.gif”); }, function() { $(this).animate({ marginLeft: ‘0’ }, 500); $(“#sliderArrow”).attr(“src”, “images/show_nav.gif”); }); } 我究竟做错了什么？〜GYZ

如何使用jquery在mousehover上有这样的背景flash动画: 你可以在这里看到两种动画： 1）左上角的文本’GENETIC LIMITED’有一个动画 2）左侧垂直菜单（家庭，支付和政策等）在鼠标hover时有彩色动画。在这两种情况下都使用Flash。如何使用jquery实现相同的效果？我看到了jquery颜色插件和其他东西（这里，这里和这里），但这似乎不是我的问题的任何解决方案。有解决方案吗？

仍然有jQuery背景动画的问题 – 在safari和IE中工作，没有别的！: 几天前我创建了一个关于动画背景图像的线程。我被建议使用一个工作正常的插件。我使用的是jQuery 1.4.2 – 但是，我在网站上遇到了coda滑块的实际问题。然后我决定更改为最新的jQuery（1.6.1），问题得到了解决。另一方面，我的背景动画在某些浏览器中破裂了。奇怪的是它适用于Mac上的safari，以及带有透明png修复的ie9,8,7甚至6。它对我来说不适用于mac或pc上的firefox和mac上的opera。还有其他人有这样的问题吗？我花了一些时间制作这些图像，并希望将它排序！必须有一些方法围绕这一点，或者我写的代码可能只是错误！？我用实际的图像和脚本做了一个小提琴。这是我做的第一个，所以我不是100％确定我做得对，随便说它是否需要调整…… 你可以在这里找到jsfiddle 非常感谢：）

使用jQuery 1.7.2的水平幻灯片动画。？: 任何人都可以建议使用jQuery 1.7.2库实现水平幻灯片动画，而不使用jQueryUI库。到目前为止，通过这个设置，我已经成功实现了垂直幻灯片 $(‘#selectorId’).fadeIn(1000); 并且淡化使用： $(‘#selectorId’).slideToggle(‘slow’); 另外请不要我已经排除了使用CSS进行转换，因为据我所知，你不能以这种方式做回调函数。

jQuery在mouseclick上创建div: 在我的网站上，我希望能够在单击鼠标时创建div，应该在鼠标单击的位置创建div。然后我希望能够动画这个div从屏幕底部飞出来。到目前为止，我有这个jQuery代码，它只是在点击时显示一个div，但是我希望它在每次显示时都能在屏幕上显示动画。任何人都可以帮助我。 $(“#divId”).hide(); $(“.holder”).click( function(event) { $(“#divId”).show().css( {position:”absolute”, top:event.pageY, left: event.pageX}) }); 和JSfiddle： http ： //jsfiddle.net/VZY6C/

jQuery slideToggle奇怪的行为: 我真的需要帮助，我看不到明显的东西，通常最好是寻求帮助。我在12列网格中有4个div。每个div都是可点击的，点击后应显示其下方的相应div，最初设置为display：none。一切都很好，只要我按顺序从头到尾点击它们，但如果我第一次点击，让我们说第三个div，它显示其相应的div，但不是在它下面，它显示它代替第一个相应的div 。我在这里使用简单的slideToggle，实际上无法理解有什么问题。如果我将相应的div（隐藏的那些）显示为可见，它们都会正确显示，所以它不是CSS错误。我可以提供代码，但我把它放在网上，只需单击方法选项卡，你就会明白我的意思。链接在这里对不起，如果我没有更好地解释它，英语不是我的母语。谢谢！

jQuery“动画”多个div inisde div: 所以我有容器，里面有5个div的yui库。这个div是菜单。所以我想要做的是，当我将鼠标移到div上时，只有这一个将动画UP，当我将鼠标移动到其他地方时，它将为DOWN设置动画。我的js代码同时为所有元素设置动画。 Smeri Računalništvo Strojništvo Galerija Slike 我的jQuery代码是这样的： $(“.description” ).hide(); $(‘div.kvadrat’).hover( function () { $(“.description” ).slideDown( “slow” ); }, function () { $(“.description” ).slideUp( “slow” ); } );

幻灯片上的文本动画的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, […]

在ng-repeat中的Jquery传递效应: 我试图将jquery传输效果添加到循环中的动态图像。以下是我的代码。 Add function addToCompare(mAction,index) { e = document.getElementById(‘myAngularApp’); scope = angular.element(e).scope(); scope.$apply(function() { scope.addToShortlist(mAction,index); }); if (mAction == “add”) { var thumbnailImg = $(“.item-img-“+index+”-addToCompare”).attr(“src”); $(” + // Add new one ‘.ui-effects-transfer { background: url(‘+thumbnailImg+’) no-repeat; }’ + ”).appendTo(‘head’); $(“.shortListed-Basket”).show(); $(“.item-img-“+index+”-addToCompare”).effect(“transfer”,{ to: $(“.shortListed-Basket”) }, 1000); $(“.hotel-“+index+”-addToCompare”).text(‘Remove’); $(“.item-“+index+”-addToCompare”).attr(“href”,”javascript:addToCompare(‘remove’,'”+index+”‘)”); } else { $(“.shortListed-Basket”).effect(“transfer”,{ to: $(“.item-img-“+index+”-addToCompare”) }, 1000); […]