jquery-animate

jQuery animation for a hover with 'mouse direction'

由 天涯浪子 提交于 2019-12-02 14:07:17
I'm trying to simulate the effect where I hover on an image an overlayed semi-transparent image will fade in from the direction where your mouse came from. Vice versa when your mouse leaves the image (fadeout + moves away) I've prepared a test page for this. Go ahead and check it out, it will clarify what the desired effect is. I have defined a HTML structure for this: <div class="overlayLink"> <img src="assets/work/thumbnails/kreatude.jpg" alt="Kreatude" /> <div class="overlayLink_overlay_bg"> </div> <div class="overlayLink_overlay_fg"> <span class="overlayLink_overlay_link"><a href="#">View

jQuery animation only working in IE

由 荒凉一梦 提交于 2019-12-02 13:50:08
问题 I have a very simple animation, were I have a tab at the side of the screen and if you click it, it will increase size. But it´s only working on IE, here is the code: <script> $(function(){ $("#a-tab > *").focusin(function(){ $("#a-tab").animate({width:'320px'}); }); $("#a-tab > *").focusout(function(){ $("#a-tab").animate({width:'10px'}); }); }); </script> It has to be #a-tab > * because of the inside content Were is the problema, how can I make it compatible with Chrome, Firefox, etc. 回答1:

background-image animation not working in Firefox

由 此生再无相见时 提交于 2019-12-02 12:16:22
问题 I am using the following script to animate a sprite for the background-image for a nav div: $("li#test2").hover( function () { $(this).animate({ 'background-position-y': '-40' }, 500); }, function () { $(this).animate({ 'background-position-y': '0' }, 500); } ); This works fine in Safari and Chrome, but not in Firefox. You can see the page it is on here. Just hover over the first 'home' image in the nav bar. Could someone let me know why it's not working in Firefox? Thanks, Nick 回答1:

How to Add Auto-Rotation to a jQuery Horizontal Accordion

由 纵然是瞬间 提交于 2019-12-02 08:40:06
I've built a horizontal accordion that animates on click. I want to add auto-rotating functionality to it so the slides will rotate by themselves every three seconds but i cannot figure this part out... Here is the code for the Horizontal Accordion: <div id="slideshow"> <ol id="slides"> <li class="slide open active" id="slide-1"> <a href="recipe_detail.aspx?did=1014"><img src="media/images/recipes/featured-tuna-chop-chop-salad.jpg" alt="" /></a> <a class="slidebutton" href="javascript:void(0);"></a> </li> <li class="slide open" id="slide-2"> <a href="recipe_detail.aspx?did=1016"><img src=

code works in JSFiddle but not browser

由 不羁岁月 提交于 2019-12-02 07:37:48
I'm trying to move a fixed div containing an image of an airplane to the right and fade to 0 as the page is scrolled down from the top. site: http://wp.ccrcc.org I works fine in JSFiddle ( http://jsfiddle.net/G4t4f/77/ ) but on in the footer of my Wordpress site. I'm obviously missing something here. This may not be the best way to do it anyway since the site is running on bootstrap 3.0.3 with bootstrap.min.js? <style> #header-plane { z-index: 5; width: 400px; position: fixed; right: 550px; top: 200px;} </style> <div id="header-plane"> <img src="http://wp.ccrcc.org/wp-content/themes/ccrcc

jquery animate (height) causes background-image flickering in firefox

由 独自空忆成欢 提交于 2019-12-02 05:55:07
问题 I have a little Problem using jQuery.animate with firefox: when i animate the height of a container with some background image, the background starts to flicker on firefox only - all other browsers (even ie) show a smooth animation. a reduced code snippet that shows what i do: <div style="background-image:url(image.jpg);background-position:50% 50%;height:200px;" onmouseover="jQuery(this).animate({height:400});"></div> I would greatly appreciate your help. 回答1: Out of interest, what happens if

background-image animation not working in Firefox

由 限于喜欢 提交于 2019-12-02 05:40:58
I am using the following script to animate a sprite for the background-image for a nav div: $("li#test2").hover( function () { $(this).animate({ 'background-position-y': '-40' }, 500); }, function () { $(this).animate({ 'background-position-y': '0' }, 500); } ); This works fine in Safari and Chrome, but not in Firefox. You can see the page it is on here . Just hover over the first 'home' image in the nav bar. Could someone let me know why it's not working in Firefox? Thanks, Nick background-position-x and background-position-y are not standards. If you want to animate, you must modify both

Jquery - Animate innerHTML possible?

由 怎甘沉沦 提交于 2019-12-02 04:23:29
问题 I'm trying to have a function that does setTimeout, then changes the innerHTML: <script type="text/javascript"> $(document).ready(function(){ setTimeout(function(){ document.getElementById("middlecolor").innerHTML='new text new text'; }, 1000); }); </script> Question : How could I animate the new text that appears, i.e. line by line as opposed to being written all at once? Thanks for any suggestions!! 回答1: Line-by-line is a bit tricky, but possible. var ps = document.getElementById("text")

Changing the background color of a <div> section

由 ぐ巨炮叔叔 提交于 2019-12-02 03:57:52
I'm trying to use jQuery to change the background color of a <div> section when pressing on a button, and below is the code to do that. Why isn't it working? HTML file <html> <head> <script type="text/javascript" src="jquery-1.6.4.js"></script> <script type="text/javascript" src="script.js"></script> <style type="text/css"> #name{ background-color: #FFFFF2; width: 100px; } </style> </head> <body> <input type="button" id="bgcolor" value="Change color"/> <div id="name"> Abder-Rahman </body> </html> script.js $("bgcolor").click(function(){ $("#name").animate( {backgroundColor: '#8B008B'}, "fast")

jQuery height when using stop() in animation or slideUp/slideDown

由 本小妞迷上赌 提交于 2019-12-02 03:35:25
I have a menu with hidden submenus. I am animating the submenu to open when I mouse-over a menuitem, and close when I mouse-out. When the user mouses over a lot of menuitems, all the animations get queued. To fix the queuing problem, I added a stop() before the animation. This caused an even worse problem with the height of the submenu decreasing to the size it is at when I mouse out. Solved by setting the height to auto after the closing-animation has finished. function leftMenuOut() { var obj = $(this).find(".toggleThisLevel2"); if (obj.length == 0) { return true; } $(this).removeClass(
订阅 jquery-animate