I’m doing an animate with JQuery UI. I’ve go an icon which I want

Question

0

Editorial Team

Asked: May 12, 20262026-05-12T23:29:32+00:00 2026-05-12T23:29:32+00:00

I’m doing an animate with JQuery UI. I’ve go an icon which I want

0

I’m doing an animate with JQuery UI.

I’ve go an icon which I want to stick out over the edge of the div, so I’m using negative margins.

The animation resizes the div and changes the background color.

However, when I animate the div the areas of the image outside the div (in the neg margins) disapear for the duration of the animation.

I’ve looked into it, and it appears the problem is coming from the resize of the div, not the color change or the margin change. Eg. It’s down to animating the CSS width property.

I’ve also tried changing related CSS properties. For example, fixing the width of the image, setting display: block and using position: absolute, none of which worked.

Anybody come across this problem before?

The link is here:

Brightwide Test

NOTE: Currently in dev and not tested in IE at all.

And the code is here:

<!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=UTF-8" />
<title>Act Now</title>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.min.js"></script>
<script type="application/javascript" language="javascript">
$(document).ready(function() {


/* Act Now Page - sponsor section mousover effect */
$('#an-sponsors').hover(
 function () {
   $(this).children().children('ul').animate({backgroundColor: "#E8F0E5", webkitBoxShadow: "2px 2px 6px rgba(212,212,212,1)", MozBoxShadow: "2px 2px 6px rgba(212,212,212,1)"}, {queue:false,duration:500});
 }, function () {
   $(this).children().children('ul').animate({backgroundColor: "#fff", webkitBoxShadow: "2px 2px 6px rgba(212,212,212,0)", MozBoxShadow: "2px 2px 6px rgba(0,0,0,0)"}, {queue:false,duration:500});
 });

/* Expanding boxes */
  $('.fadeThis').hover(
 function () {
  $(this).animate({backgroundColor: "#E8F0E5", marginLeft: "-1%", width: "31%", paddingBottom: "25px"}, {queue:false,duration:500});
   $(this).children().children('li').animate({paddingRight:"30px"}, {queue:false,duration:500});
   $(this).children().children('.alt').animate({backgroundColor: "#DAEAD3"}, {queue:false,duration:500});
   $(this).children('h3').animate({backgroundColor: "#68B744"}, {queue:false,duration:500});
 }, function () {
   $(this).animate({backgroundColor: "#fff", marginLeft: "0", width: "29%", paddingBottom: "10px"}, {queue:false,duration:500});
   $(this).children().children('li').animate({paddingRight:"10px"}, {queue:false,duration:500});
   $(this).children().children('.alt').animate({backgroundColor: "#f2f2f2"}, {queue:false,duration:500});
   $(this).children('h3').animate({backgroundColor: "#666"}, {queue:false,duration:500});
 });



  $('.fadeThis2').hover(
 function () {
   $(this).animate({backgroundColor: "#E8F0E5", marginLeft: "-1%", width: "31%", paddingBottom: "25px"}, {queue:false,duration:500});
   $(this).children().children('li').animate({paddingRight:"30px"}, {queue:false,duration:500});
   $(this).children().children('.alt').animate({backgroundColor: "#DAEAD3"}, {queue:false,duration:500});
   $(this).children('h3').animate({backgroundColor: "#68B744"}, {queue:false,duration:500});
 }, function () {
   $(this).animate({backgroundColor: "#fff", marginLeft: "0", width: "29%", paddingBottom: "10px"}, {queue:false,duration:500});
   $(this).children().children('li').animate({paddingRight:"10px"}, {queue:false,duration:500});
   $(this).children().children('.alt').animate({backgroundColor: "#f2f2f2"}, {queue:false,duration:500});
   $(this).children('h3').animate({backgroundColor: "#666"}, {queue:false,duration:500});
 });


  /* Tabs  */
/* Credit: http://www.viget.com/inspire/fun-with-jquerys-animation-function/ */

var navDuration = 150; //time in miliseconds
      var navJumpHeight = "0.45em";

      $('#tabs li').hover(function() {
          $(this).animate({top : "-="+navJumpHeight }, navDuration);  
    $(this).children('a').animate({borderColor: "#DAEAD3", backgroundColor: "#E8F0E5" }, navDuration);  
      }, function() {
          $(this).animate({ top : "15px" }, navDuration);
    $(this).children('a').animate({borderColor: "#ddd", backgroundColor: "#fff" }, navDuration); 
      });

});








/* IDEA .. have the "act" element pulsate periodically to draw attention to itself */

</script>
<style>

/* temp */

body {
 background:url(assets/header.jpg) repeat-x center top #f7f7f7;
 margin: 180px 0 0 0;
}


/* end temp */

.an {
 max-width: 1000px;
 min-width: 770px;
 _width: 960px;
 margin: 0 auto;
 font-size: 90%;
 font-family: Helvetica, Arial, sans-serif;
}

.an ul {
 margin: 0;
 padding: 10px 0 10px 15px;
}

.an li {
 list-style: none;
 background: url(assets/arrow.png) no-repeat 0 7px;
 margin: 0;
 padding: 3px 0 3px 15px;
}

.an a {
 color: #0E7FC1;
}

.an a:hover {
 text-decoration: none;
}

#an-details {
 width: 58%; 
 float: left;
 font-size: 95%;
}

#an-details p {
 margin: 0 0 5px 0;
}

#an-details .casual {
 margin: 10px 0 5px 0;
}

#an-details h1 {
 margin: 10px 0;
 font-size: 130%;
 padding-left: 15px;
 display: inline;
 line-height: 2;
}

#an-sponsors {
 padding-left: 40px;
 width: 35%; 
 float: right;
 background: url(assets/divider.jpg) no-repeat;
 min-height: 350px;
 _height: 350px;
}

#an-sponsors ul {
 width: 290px;
 background: #fff;
 border: 2px solid #fff;
 -moz-border-radius: 5px; 
 -webkit-border-radius: 5px;
}

#an-sponsor {
 display: block;
 overflow: hidden;
 background-repeat: no-repeat;
 background-position: center;
 text-indent: -9000px;
 width: 290px;
}

#an-film-still {
 float: left;
 margin: 0 15px 20px 0;
 width: 240px;
}

#an-description {
 clear: both;
 line-height: 1.4;
}

#an-description .standfirst {
 font-size: 120%; 
}

#an-director span, #an-distributor span, #an-year span {
 font-weight: bold;
 padding-left: 15px;
}

#an-act-now {
 clear: both;
}

#an-dp {
 font-weight: bold;
}

#an-dp span {
 font-weight: normal;  
}

#an-friends {
 clear: both;
 padding-top: 40px;
 font-size: 130%;
}

.fadeThis, .fadeThis2 {
 width: 29%;
 float: left;
 margin-right: 5%;
 background: #fffffff;
 border: 2px solid #fff;
 -moz-border-radius: 5px; 
 -webkit-border-radius: 5px;
 -moz-box-shadow: 2px 2px 6px rgba(212,212,212,1);
 -webkit-box-shadow: 2px 2px 6px rgba(212,212,212,1);
}


.fadeThis h3, .fadeThis2 h3 {
 font-size: 110%;
 margin: 0;
 padding: 5px 10px;
 background: #666;
 color:#FFF;
 -moz-border-radius-topright: 5px;
 -moz-border-radius-topleft: 5px;
 -webkit-border-top-right-radius: 5px;
 -webkit-border-top-left-radius: 5px;
}

.fadeThis2 {
 margin-right: 0; 
}

.ico {
 float: left;
 margin: -10px 10px 0 -10px;

}

ul.conversation li span {
 font-size: 80%;
 color: #999;
 display: block;
}


ul.conversation {
 list-style: none;
 padding: 0;
 margin: 0;
}

ul.conversation li {
 background-repeat: no-repeat;
 background-position: 10px 15px;
 min-height: 65px;
 list-style: none;
 padding: 10px 10px 10px 55px;
 margin: 0;
 background-image: none;
}

.fadeThis ul li.alt, .fadeThis2 ul li.alt {
  background-color: #f5f5f5;
}

#an-act-now form textarea {
 width:100%;
 height: 100px;
}

#an-share {
 clear: both;
 padding: 0;
}

.fadeThis, .fadeThis2 {
 padding-bottom: 10px;
}

.casual {
 font-family: "Sean";
 color: #666;
 -webkit-transform: rotate(-3deg);
 -moz-transform: rotate(-3deg);
}

#an-sponsors .casual {
 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
}

.conversation li h4 {
 font-size: 100%;
 font-weight: normal;
 font-family: "Sean";
 color: #666;
 margin: 0;
}

.conversation li h4 a {
 text-decoration: none;
 color: #666;
}

.conversation li h4 a:hover {
 text-decoration: underline;
 color: #0E7FC1;
}





/* nav1 */
.an #tabs {
 height: 3em;
 overflow: hidden;
 padding: 0;
 margin: 30px 0 0 0;
 float: left;
 list-style: none;
 position: relative;
 clear: both;
}
.an #tabs li, .an #tabs li a {
 position: relative;
 float: left;
}      
.an #tabs li { top: 15px; margin: 0 1px 0 0; background: none; padding: 0; }
.an #tabs li a {
 display: block;
 padding: 0.4em 1.1em;
 background: #fff;
 border: 1px solid #ddd;
 border-bottom: none !important;
 color: #333;
 text-decoration: none;
 height: 195px;
 -moz-border-radius-topright: 5px;
 -moz-border-radius-topleft: 5px;
 -webkit-border-top-right-radius: 5px;
 -webkit-border-top-left-radius: 5px;
}



</style>
<body>

<div class="an">
 <div id="an-details">
     <img src="assets/screenshot-ml.jpg" alt="Still from McLibel" id="an-film-still" />
        <p class="casual">You have been watching...</p>
        <h1>McLibel</h1>
     <p id="an-director"><span>Director:</span> Franny Armstrong</p>
        <p id="an-distributor"><span>Distributor:</span> Spanner Films</p>
        <p id="an-year"><span>Released:</span> 1999</p>


     <div id="an-description">
         <p class="standfirst">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at scelerisque leo. Nullam elementum turpis id dui hendrerit eget auctor risus convallis. Aliquam erat volutpat.</p> 

            <p>Curabitur cursus, eros feugiat convallis vestibulum, diam justo aliquam arcu, sed placerat ipsum est at nisi. Donec metus mauris, fermentum et vehicula vel, euismod ut sem. Ut et tortor eget elit imperdiet gravida eget ac dolor. Ut mattis purus et mi commodo sed lacinia tellus egestas. </p>

            </div>
 </div>
    <div id="an-sponsors">
     <div id="an-sponsors-main">
         <p class="casual">This film was supported by the lovely people at...</p>
         <h2 id="an-sponsor" style="background-image: url(assets/wwf_logo.jpg); height: 150px;">WWF</h2>
            <ul>
             <li><a href="#">Join WWF</a></li>
                <li><a href="#">Give WWF some money</a></li>
                <li><a href="#">Sign a petition</a></li>
            </ul>
        </div>
    </div>

    <div id="an-act-now">
     <h2 id="an-dp"><span class="casual">Don't Panic!</span> Take Action</h2>

     <div id="an-talk" class="fadeThis">
         <img src="assets/icon-1.png" alt="#" class="ico" />
            <h3>Talk</h3>
            <ul>
             <li><a href="#">Action 1</a></li>
                <li><a href="#">Action 2</a></li>
                <li><a href="#">Action 3</a></li>
            </ul>
        </div>

        <div id="an-think" class="fadeThis">
         <h3>Think</h3>
            <ul>
             <li><a href="#">Action 1</a></li>
                <li><a href="#">Action 2</a></li>
                <li><a href="#">Action 3</a></li>
            </ul>
        </div>

        <div id="an-act" class="fadeThis2">
         <h3>Act</h3>
            <ul>
             <li><a href="#">Action 1</a></li>
                <li><a href="#">Action 2</a></li>
                <li><a href="#">Action 3</a></li>
                <li><a href="#">Action 2</a></li>
                <li><a href="#">Action 3</a></li>
            </ul>
        </div>

        <h2 id="an-friends">Here's what your friends are saying...</h2>

        <div id="an-social-1" class="fadeThis">
         <h3>Twitter</h3>
            <ul class="conversation">
             <li style="background-image:url(assets/av1.jpg)"><h4><a href="#">Joanna said...</a></h4>
                Just watched OilSpill. OMG, that is terrible. How can people do things like that? They should ban it. #brightwide
    <span>at 3pm on Nov 17th</span></li>
                <li class="alt" style="background-image:url(assets/av2.jpg)"><h4><a href="#">Rich Quick said...</a></h4>
                Just watched OilSpill.  Am so angry. Why would people behave like this? #brightwide
    <span>at 3pm on Nov 17th</span></li>
                <li style="background-image:url(assets/av3.jpg)"><h4><a href="#">Oli Best said...</a></h4>
                <a href="#">richquick</a> I see what you mean.  It's a discgrace. #brightwide
    <span>at 3pm on Nov 17th</span></li>
            </ul>
        </div>

        <div id="an-social-2" class="fadeThis">
         <h3>Facebook</h3>
            <ul class="conversation">
             <li style="background-image:url(assets/av1.jpg)"><h4><a href="#">Joanna said...</a></h4>
                Just watched OilSpill. OMG, that is terrible. How can people do things like that? They should ban it. #brightwide
    <span>at 3pm on Nov 17th</span></li>
                <li class="alt" style="background-image:url(assets/av2.jpg)"><h4><a href="#">Rich Quick said...</a></h4>
                Just watched OilSpill.  Am so angry. Why would people behave like this? #brightwide
    <span>at 3pm on Nov 17th</span></li>
                <li style="background-image:url(assets/av3.jpg)"><h4><a href="#">Oli Best said...</a></h4>
                <a href="#">richquick</a> I see what you mean.  It's a discgrace. #brightwide
    <span>at 3pm on Nov 17th</span></li>
            </ul>
        </div>

        <div id="an-social-3" class="fadeThis2">
         <h3>Comments</h3>
            <ul class="conversation">
             <li style="background-image:url(assets/av1.jpg)"><h4><a href="#">Joanna said...</a></h4>
                Just watched OilSpill. OMG, that is terrible. How can people do things like that? They should ban it. #brightwide
    <span>at 3pm on Nov 17th</span></li>
                <li class="alt" style="background-image:url(assets/av2.jpg)"><h4><a href="#">Rich Quick said...</a></h4>
                Just watched OilSpill.  Am so angry. Why would people behave like this? #brightwide
    <span>at 3pm on Nov 17th</span></li>
                <li style="background-image:url(assets/av3.jpg)"><h4><a href="#">Oli Best said...</a></h4>
                <a href="#">richquick</a> I see what you mean.  It's a discgrace. #brightwide
    <span>at 3pm on Nov 17th</span></li>
            </ul>
        </div>


        <ul id="tabs">
         <li><a href="#">Twitter</a></li>
            <li><a href="#">Facebook</a></li>
            <li><a href="#">Comment</a></li>
            <span id="nav_move"></span> 
        </ul>
        <form action="#" method="post" id="an-share">
   <textarea>Join the conversation...</textarea>
            <button>Say it</button>     
        </form>
    </div>
</div>

</body>
</html>

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-12T23:29:33+00:00

Just wanted to add the response here as well as on Boagworld.

The issue is with jQuery setting overflow:hidden; while it’s doing the animation. There are two solutions to your issue:

(1) Set overflow:visible; in your stylesheet. You can add !important if jQuery is still overriding it. I don’t know if this will mess with how jQuery animates and it might screw up some browsers but it’s worth a shot.

(2) Wrap the DIV you’re animating right now inside another DIV tag. Give the inner DIV enough padding to accommodate the icon then animate the outer DIV tag. This option adds more markup but it doesn’t mess with how jQuery does things so if the first one turns out to be buggy it’s guaranteed to work.

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I’m doing an animate with JQuery UI. I’ve go an icon which I want

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply