Tag: 动画

如何根据图片中显示的百分比进行星级评分？

我试图根据得分或百分比创建星级评分。 我为内联星创建了codepen。 但是不明白如何处理图像中显示的星星。 星星不应该是内联的，它们应该形成一个三角形。 你能不能帮帮我吧 和我的codepen链接 /*———- general ———-*/ body { background: #ff7070; color: #F3FCF0; font-family: sans-serif; text-align: center; } /*———- star rating ———-*/ %flex-display { display: flex; } .star-rating { @extend %flex-display; align-items: center; font-size: 3em; justify-content: center; margin-top: 50px; } .back-stars { @extend %flex-display; color: #bb5252; position: relative; text-shadow: 4px 4px 10px #843a3a; […]

如何使用jQuery在第二次单击时反转CSS动画

我做了以下菜单图标CSS动画，当我点击它时触发。 当我第二次使用jQuery点击它时，我想让它反向动画。 #path1 { stroke-dasharray: 33px; stroke-dashoffset: 33px; animation: line 1.5s linear forwards; animation-play-state: paused; } @keyframes line { 100% { stroke-dashoffset: -15.5; } } #halfLineLeft { transform-origin: 1% 50%; animation: shrinkleft 1s linear forwards; animation-play-state: paused; } #halfLineRight { transform-origin: 100% 1%; animation: shrinkleft 1s linear forwards; animation-play-state: paused; } @keyframes shrinkleft { 100% […]

有人可以给我一个jQuery动画函数的独立代码

最近我问过这个问题： 想了解Animatefunction（计算和步进） ，我得到了答案。 我试图删除不必要的jQuery代码，只留下jQuery动画函数。 如果有人能为我提供具有其他技术的jQuery动画function – 我将非常感激。

在IE中缓慢的jQuery动画

我有一个网站http://www.special4you.co.uk，并有一个由气球制作的动画导航。 这在FF和Chrome中看起来很漂亮，但在所有的IE中，它看起来很不错，因为动画效果很差且呈锯齿状。 有谁知道为什么这个或者如果这是我的错？ 我的代码是： $(document).ready(function(){ Cufon.replace(‘h1, p, #address, h2’); $(“.balloon-nav”).hover(function(hoverEvent) { $(“a.balloon-nav”).click(function(clickEvent, hoverEvent){ clickEvent.stopPropagation(); var element = $(this); var target = element.attr(“href”); var zIndex = element.css(“z-index”); element.attr(“href”, “#”).css(“z-index”, “100”); element.animate({ top: “0” }, 1500, ‘easeOutBounce’, function() { element.css(“z-index”, zIndex); window.location=target; }); }); var e = this; $(e).animate({ marginTop: “-14px” }, 250, function() { $(e).animate({ marginTop: […]

动画jQuery高度百分比

当我试图制作百分比动画时，它不是动画，而是立即扩展到整个高度。 我希望它扩展到100％，但顺利 CSS： #block-views{ overflow:hidden; height:20px; } HTML： 1 2 3 4 5 6 7 8 9 10 Load more Jquery代码： $(function() { $( “.loadmore” ).toggle( function() { $( “#block-views” ).animate({ height: “20px”, }, 1000 ); }, function() { $( “#block-views” ).animate({ height: “100%”, }, 1000 ); } ); }); 当我点击加载更多时，它会立即扩展到100％，而不是平滑，但是当我第二次点击它时，它会将大小平滑减小到20像素。 我尝试在Chrome的检查器工具中观察扩展过程，我可以清楚地看到百分比正在顺利添加，但数字不是整数，Chrome似乎无法识别它。 我怎么解决这个问题？

UI的可排序列表的动画过渡

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

JQuery UI（效果核心）addClass / removeClass在一个元素上有多个选择器……但是有一个问题

谢谢参观。 我正在尝试使用jQ UI addClass / remove类方法在单击前面的兄弟div时扩展hr元素。 jQ UI效果核心可以在两个类之间实现平滑的动画过渡： http ： //jqueryui.com/demos/removeClass/ 。 此外，必须使用$动态添加hr才能实现更广泛的网站设计。 以下是这个难题的部分： 我的代码呈现四个100x100px兄弟div的行。 这些div没有课程，但如果它有帮助，请随意添加它们 – 每个div最终都会有一个独特的课程。 在每第4个div之后，有一个动态添加的hr。 单击任何给定的div后，紧接的下一个hr必须切换到“open”类，这会导致行展开。 如果再次单击此div，它必须从hr切换/删除“打开”类，导致hr缩小到原始大小。 如果单击一个div以展开hr然后单击另一个div，则必须触发两个动画：首先，必须删除“open”类，导致行缩小，然后必须重新添加该类重新开行。 但是，例如，如果单击div打开第二行，然后单击第一个hr之前的第二个div，则此操作必须先关闭第二个hr，然后打开第二个div的相应hr。 我被卡住了。 我已经尝试了一些jQfunction组合，但结果很糟糕。 你看到的是我得到的最接近的。 谢谢你给这一个人一个机会。 随意添加到代码中，但您可以使其工作。 /*CSS-some of this creates other events not mentioned above. These are simplified versions of what I need for my final site design*/ .main { width: 450px; } […]

当元素之间移动鼠标太快时，jQueryhover问题

我在页面上多次重复以下html： outer inner 并有这个jQuery： $(‘.inner’).hide(); $(‘.outer’).hover(function(e) { $(this).children(‘.inner’).show(“slide”, { direction: “right” }, 1000); }, function(e) { $(this).children(‘.inner’).hide(“slide”, { direction: “right” }, 1000); }); 正如你在这里看到的： http ： //jsfiddle.net/342q3/15/在div之间缓慢移动鼠标（等待动画完成）达到了一次只显示一个内部div所需的效果。 但是，如果在div之间快速移动鼠标，则所有内部div仍然可见。 我尝试过使用stop（）函数但没有成功。 如何防止内部div保持打开状态？

JCarousel和Cufon没有合作：动画让cufon消失了

我正在使用cufon和jCarousel。 Carousel有五个项目，从右到左旋转 – 换句话说，它们离开屏幕左侧。 你可以在这里看到它。 http://www.foursquare.org/site/test 如果我将轮播保留为默认行为，它将转到第5张幻灯片，然后快速向右滑动，一切都正常显示。 如果我将旋转木马设置为’圆形’，则第一次旋转后，cufon标题会消失; 即，当第一张幻灯片附加到最后一张幻灯片的右侧时，它们不会与幻灯片的其余部分一起出现。 你知道我能做些什么来让jCarousel和Cufon合作或沟通，以便头条新闻在这种情况下不会消失吗？ TTFN Travis

jQuery slide li离开了

我正在制作一个幻灯片查看器，显示的ul中有5个lis。 如何使用j查询在li上向左滑动，这样左边的li就不再显示了，其中一个未显示？