jquery-animate

问题 this is a super easy question. I know basically what I want and how to do it, I'm jusy not sure what selector to use in a certain part. The animation works fine if I take away the toggle() function, but it only works to open the menu, not to close it. Here is my jquery code $(document).ready(function(){ $('#menu_button').click(function(){ $(????).toggle(function(){ $('.sidebar_menu').animate({left:'0'}, 'slow'); $('.wrapper').animate({'margin-left':'250px'}, 'slow'); }); }) }); And here is my

问题 I'm using jQuery to fade in/out some elements and change the opacity of the others. $(function(){ $('.image').each(function() { $(this).hover( function() { $(this).stop().animate({ opacity: 0.3 }, 'slow'); $(this).siblings().fadeIn('slow'); }, function() { $(this).stop().animate({ opacity: 1 }, 'slow'); $(this).siblings().fadeOut('slow'); }) }); }); You can see the full code at http://projects.klavina.com/stackoverflow/01/ (I'm also using the jQuery Masonry plugin on the page). I'm fairly new

问题 This code: jQuery('body').animate({scrollTop: target.offset().top}, 300); Works in firefox, but not chrome. This code: jQuery('html').animate({scrollTop: target.offset().top}, 300); Works in chrome, but not firefox. I haven't tested yet in IE. What is the correct way to do this, cross-browser? If it's not clear from the above snippets, I target is a div on the page, and I want to scroll down slowly to it slowly, so they do exactly what I want... just not cross-browser. 回答1: Specify both html

问题 http://jsfiddle.net/AndyMP/fVKDy/ This fiddle illustrates a problem I am trying to solve. The container DIV accommodates two DIVs which are animated across. The second DIV has a smaller height than the first because there is less content. What I am trying to do is get the bottom DIV to slide up automatically according to the height of the content in the second DIV when it is visible. But it slides up and over the second DIV. Any thoughts on how to solve this? $(function() { $(".left_slide")

问题 I have a button with the id of "start_game" that has an attached click function and a callback to fade the button out, and then fade in a div that is currently set by css to display:none. When I click the button, I see that the outer container div that holds all of this expands as if to make room for the div that is to be displayed, however I never see the content that I have inside of it. Here is the current code: $("#start_game").click(function () { $(this).fadeOut(); $(".input-append")

问题 Is there any way i can animate a div using percentages with jquery? I've tried these: $('.box1').animate({width:($(".wrapper").width()*.100)},"fast");}) $('.box1').animate({width:'100%'},"fast");}) $('.box1').animate({width:100%;}) none of the above work... any ideas? UPDATE var p_e_h= 1.0; var p_e_w= 1.0; $('.box1').animate({width:($(".wrapper").width()* p_e_w)},"fast"); $('.box1').animate({height:($(".wrapper").height()* p_e_h)},"fast"); width works, but height does not. Unless i click the

问题 Hey all, I'm having an issue with IE that seems like a fairly known/common bug. I have an image slide show I've built out in jQuery that works flawlessly in other browsers. However, in IE I've run into a problem with the text being anti-aliased once the slide show runs one time. Which is to say, if there are three images in the slide show, then the first time each of those three images appear with their text, the text renders properly. However, once the slide show cycles through the text

问题 I've got some images within a div which i'm trying to when I click the next button animate to the next one in the div In this div I also have my previous and next button which I obviously don't want to animate to. <div class="work"> <a href="#" class="rightButton"><img src="http://www.jamietaylor-webdesign.co.uk/images/home/right.png" /></a> <a href="#" class="leftButton"><img src="http://www.jamietaylor-webdesign.co.uk/images/home/left.png" /></a> <a href="#" class="1"><img class="topLeft"

问题 I'm using the following code to animate a div. <script> $(function() { $("a.shift").click(function() { $("#introOverlay").animate({ height: 0, }, 2000) }); }); </script> When the animation finishes, I would like to remove it. How can I do that? 回答1: animate takes 2 more params, so you could do: $("a.shift") .click(function() { $("#introOverlay") .animate({height: 0}, 2000,"linear",function() { $(this).remove(); } ) } ); Untested. EDIT: Tested: here's the full page I used, which expands to

问题 I have a set of divs, each corresponds to a set of categories. When I click on a filter, this will change the classes of the divs and make them vissible or hidden depending on those categories. I control how the divs fade in/out and they do it slow and nicely but everytime the divs disappear the ones that are left unchanged move abruptly to fill the empty space left by the ones that were hidden. How can I smooth the movement of the divs that weren't hidden after the other ones disappear and