All geek questions in one place

JQuery animate ()

My code is below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> <!-- #Layer1 { position:absolute; width:200px; height:115px; z-index:1; left: 445px; top: 64px; } --> </style> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> function toggle() { $("#Layer1").animate({width:"20px"},1000); } </script> </head> <body onload="toggle()"> <div id="Layer1"><img src="friend-line.jpg" width="243" height="380" /></div> </body> </html>

Now, when the page loads, the animation initially appears, but soon the dimensions of layer 1 will be restored. I would like to know why this is happening. Thanks!

+3
source share
4 answers

Animation adds CSS overflow:hidden during its creation. When it stops, overflow returns to its previous state, so you should just add CSS overflow:hidden to #Layer1

In addition, I suggest you use the jQuery doc ready functionality instead of the built-in onload Javascript.

So your whole JS will be:

 $(function() { // <== doc ready $("#Layer1").css("overflow","hidden").animate({width:"20px"},1000); });

JsFiddle example

I'm not quite sure what you are trying to execute with your code, but you can also include overflow:hidden in CSS for #Layer1 :

 #Layer1 { position:absolute; width:200px; height:115px; z-index:1; left: 445px; top: 64px; overflow:hidden; }

Using the above CSS, you can use your source code, just wrap it in a finished document and remove the onload from the HTML:

 $(function() { // <== doc ready $("#Layer1").animate({width:"20px"},1000); });

JsFiddle example

Note that the width of the div is less than the width of the image. Not sure if this is on purpose.

+7
source

maybe because you change the width of the div , not the width of img

it is also better to use $(document).ready() on the script than using onload on the body

if you do not want to resize the image, but just hide the reset content on your css, you can add overflow: hidden;

Otherwise, I do not see why the problem occurs.

+1
source

In fact, the dimensions of Layer1 not restored. However, the image size remains the same. The reason it was clipped during the animation is because the animate function automatically adds an overflow: hidden; declaration overflow: hidden; to the fact that he revives.

 if ( opt.overflow != null ) { this.style.overflow = "hidden"; }

Once the animation stops, overflow will revert to the default value, which is visible . If you want it to remain trimmed, just add the overflow: hidden declaration to the CSS #Layer1 rule.

+1
source

use a percentage (%) instead of a pixel (px) in the width of your image. Because while you specify the width of the image in px, it maintains a fixed image width. And while you give it in percent (%), the image width is divided by its parent element. Your code should look like this:

  <body onload="toggle()"> <div id="Layer1"><img src="jquery-drag-drop/images/rrr.jpg" width="100%" /></div> </body>

Click here to learn more about jQuery animations with images.

0
source

Source: https://habr.com/ru/post/1439946/

More articles:


All Articles