Tag: 过渡

无论如何将css3过渡动画添加到jQuery事件上的元素: 有没有办法在jQuery事件上添加css3动画，例如： .box{ width:100px; height:100px; bakground-color:#000; } .animate{ width:0px; -webkit-transition-property: width; -webkit-transition-duration: 500ms; -moz-transition-property: width; -moz-transition-duration: 500ms; } click me to animate $(‘button’).click(function(){ $(‘.box’).addClass(‘animate’); });

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

css3和jquery加载页面滑块效果: 嗨我正在尝试使用css3和jquery创建一个完整的页面加载滑块效果。为此，我使用两个div来加载页面。我有前一个，后一个和下一个按钮。我有下一个效果的问题。当我点击下一个按钮时，我现在用translateX（’100％’）将新页面加载到div 2中。然后我将translateX（’ – 100％’）添加到div1（此时屏幕上的translateX（’0％’））。效果应该是translateX（’ – 100％’）div1，然后是div2的translateX（’0％’）。所有翻译都是1.0s的过渡。这很有效。但是，当我再次点击下一个按钮时，div1与translateX（’ – 100％’），（在左边，在屏幕外），所以我用translateX（’ – 100％’）删除了类，并用translateX添加另一个类（’100％’）过渡期。然后我删除这个类并添加另一个带有translateX（’0％’）的类，转换为1.0s。我为div2删除了带有translateX（’0％’）的类，并使用translateX（’ – 100％’）添加另一个向左移动。但这不起作用。 div1由屏幕左侧而不是右侧进入。任何的想法？ CSS .to-next { transform: translateX(100%); } .to-screen { transform: translateX(0%); transition-duration: 1.0s; } .to-left { transform: translateX(-100%); transition-duration: 1.0s; } HTML JavaScript $(‘#ajax-inserted2’).removeClass(‘to-screen’).addClass(‘to-left’); $(‘#ajax-inserted1’).removeClass(‘to-left’).addClass(‘to-next’).removeClass(‘to-next’).addClass(‘to-screen’);

HTML5中的3D图像转换: 我正在尝试使用这个令人敬畏的图像滑动运动。这是一个免费的HTML5模板。这是链接freehtml5templates.com/fascination-html5-and-css3-template 。我下载了源代码，但我无法重建它。我只需要3D图像滑动。所以我只把那部分拿出去并保持其他一切相同， jsfiddle.net / smaran / rpgqD 。我没有在Fiddle中添加CSS和JS，因为有多个，但如果你从我刚给你的链接的源代码下载，你可以找到它们。帮帮我。代码不完整吗？

Jqmobile中的数据转换和数据混合: 在我的Jqmobile代码中，我试图通过对锚链接应用data-transition=”slide”来传输页面。问题是链接页面有我自己编写的自定义jquery …当我点击数据转换的锚点时=“幻灯片”和href然后它肯定过境但链接的页面自定义jquery脚本不运行…我尝试使用data-ajax-“false”但在这种情况下自定义脚本运行但不是data-transition=”slide” 。 ..我想要两个人一起跑……难道可能……？这是简单的自定义，在这我是显示/隐藏输入框.. $(document).bind(“pageinit”, function(){ $(‘#near_index’).hide(); $(‘#find’).click(function() { $(‘#near_index’).show(); }); }); 这是HTML， Category 2

Jquery fadeIn / fadeOut动画问题: 我正在使用Jquery FadeIn / FaeOut来显示和隐藏我页面上的内容。像这样： $(‘.subnav_company’).click(function(){ $(‘.aboutcontent’).fadeOut(‘slow’); $(‘.company’).fadeIn(‘slow’); }); 我的问题是因为div’.company’位于’.aboutcontent’下方，当显示’.company’时它出现在’.aboutcontent’下面，直到div完全隐藏，创建了一个不平滑的过渡效果。如何在显示和隐藏div之间进行过渡？没有跳跃。这是HTML： Developers The developers are the best we have some great developers Company offers a complete management tool . It’s an easy to use and efficient way to manage and plan stuff. It allows people to communicate and get along.

UI的可排序列表的动画过渡: 我正在使用jQueryUI可排序列表，并希望在向上或向下拖动元素时移动li时动画转换。正如苹果公司在重新安排播放列表歌曲时在iPod应用程序中所做的那样。这可能吗？我搜索了几个小时，但找不到任何有用的东西。

接收元素位于CSS过渡的中间位置: 我需要在CSS过渡的中间接收元素left和top属性。目前我使用jQuery位置方法，它似乎在某种程度上工作。我做了两个例子来更清楚地表明我的问题： 1）这是非工作示例，其中元素的位置被打印到控制台。接收到正确的位置，直到元素转换更改为其原始位置。在转换值第一次更改后，位置不再更新。 jsFiddle链接： http ： //jsfiddle.net/PCWDa/8/ 2）这是WORKING示例，只向我们报告元素位置的方式不同：位置输入（type = text）元素值。 jsFiddle链接： http ： //jsfiddle.net/PCWDa/9/ 结论：当dom元素属性没有收到任何更新（比如更新文本元素的值等）时，jQuerys position（）方法似乎没有收到正确的位置。错误？这可能是jQuery，css或浏览器本身的错误？是否有任何变通方法可以让第一个示例工作 – 在任何时候在转换过程中获得正确的位置，而无需像第二个示例中那样更改dom元素属性。 jsFiddle代码：要获取示例1代码，请将变量设置为false并将示例2更改为true。 CSS .box{ width: 100px; height: 100px; background-color: red; position: relative; -webkit-transition: all 5000ms ease; } .box_moved{ -webkit-transform: translateX(300px); } HTML JavaScript的 var direction = false; var working = […]

当旋转木马只有1张幻灯片时，猫头鹰旋转木马仍会过渡: 我想知道是否有人能帮忙解决这个问题。我在CMS中使用旋转木马，并希望客户有时只有1张幻灯片，如果他们愿意的话。但是，如果只有1张幻灯片，则仍会出现淡入淡出过渡，因此它基本上会过渡到自身。当只有一张幻灯片时，有没有办法阻止旋转木马过渡？令我感到惊讶的是，这不是一个内置function，因为它与我使用过的其他旋转木马一样。 #owl-demo .item img{ display: block; width: 100%; height: auto; } $(document).ready(function() { $(“#owl-demo”).owlCarousel({ navigation: false, stopOnHover: true, paginationSpeed: 1000, autoPlay: 5000, goToFirstSpeed: 2000, autoHeight : true, transitionStyle:”fade”, singleItem: true // “singleItem:true” is a shortcut for: // items : 1, // itemsDesktop : false, // itemsDesktopSmall : false, // itemsTablet: false, […]

为什么这个CSS3在高度上的过渡不起作用: 我一直在手风琴中工作，但由于一些奇怪的原因，下面的代码： .collapse { position: relative; height: 0; overflow: hidden; -webkit-transition: height .35s ease; -moz-transition: height .35s ease; -o-transition: height .35s ease; transition: height .35s ease; } .collapse.in { height: auto; } Accordion Pane 1 content $(‘.something’).click(function(event){ event.preventDefault(); $(this).next(‘.accordion-body’).toggleClass(‘in’); }) http://jsfiddle.net/CvdXK/ 似乎没有用。高度没有动画。我不知道为什么。首先十分感谢。